ComponentOne Studio MVC5 Classic ヘルプ
列バンドの追加
MVC Classic ウィジェット > Wijgrid > 列バンドの追加

列バンドの追加カスタムヘッダー列バンドを wijgrid ウィジェットに簡単に追加できます。バンドを使用してグリッド内の類似した列をグループ化できます。バンドを作成して、複数レベルの列ヘッダーを実装する階層構造に列を編成できます。headerText オプションを使用すると、各バンドにテキストが割り当てられます。例については、Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/grid/DataSources）にアクセスし、MVC コントロールエクスプローラの grid > Bands サンプルのライブデモをご覧ください。

以下の手順を実行します。

  1. ASP.NET MVC 5 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. 依存関係をチェックして、プロジェクトが Wijmo の最新バージョンを参照していることを確認します。これらはページの <head> タグ内に配置されている必要があります。Wijmo の最新バージョンの依存関係は http://wijmo.c1.grapecity.com/download/#wijmo-cdn で確認できます。
  4. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <div class="main demo">
    <table id="demo">
        <thead>
            <tr>
<th>ID</th><th>Company</th><th>Name</th><th>Title</th>
<th>Address</th><th>City</th><th>Country</th><th>Phone</th><th>Fax</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>ALFKI</td><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Sales Representative</td><td>Obere Str. 57</td><td>Berlin</td><td>Germany</td><td>030-0074321</td><td>030-0076545</td>
            </tr>
            <tr>
                <td>ANATR</td><td>Ana Trujillo Emparedados y helados</td><td>Ana Trujillo</td><td>Owner</td><td>Avda. de la Constitucion 2222</td><td>Mexico D.F.</td><td>Mexico</td><td>(5) 555-4729</td><td>(5) 555-3745</td>
            </tr>
            <tr>
                <td>ANTON</td><td>Antonio Moreno Taqueria</td><td>Antonio Moreno</td><td>Owner</td><td>Mataderos 2312</td><td>Mexico D.F.</td><td>Mexico</td><td>(5) 555-3932</td><td> </td>
            </tr>
            <tr>
                <td>AROUT</td><td>Around the Horn</td><td>Thomas Hardy</td><td>Sales Representative</td><td>120 Hanover Sq.</td><td>London</td><td>UK</td><td>(171) 555-7788</td><td>(171) 555-6750</td>
            </tr>
            <tr>
                <td>BERGS</td><td>Berglunds snabbkop</td><td>Christina Berglund</td><td>Order Administrator</td><td>Berguvsvagen 8</td><td>Lulea</td><td>Sweden</td><td>0921-12 34 65</td><td>0921-12 34 67</td>
            </tr>
        </tbody>
    </table>
</div>

    このマークアップは１つのテーブル用のコンテンツを追加します。

  5. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijgrid ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
            $(document).ready(function () {
                $("#demo").wijgrid({
                allowSorting:true,
                selectionMode:"singleCell",
                columns: [
                    {}, // ID
                    {}, // 会社
                    { 
                        headerText:"Additional information",
                        columns: [
                            {
                                headerText:"Contact",
                                columns: [
                                    {}, // 名前                                   
                                    {} // 肩書き                         
                               ]
                            },
                            {
                                headerText: "Regional information",
                                columns: [
                                    {
                               headerText:"Address information",
                               columns: [
                              {}, // 住所
                              {}, // 都市
                              {} // 国
                               ]
                            },
                         {
                               headerText: "Communication",
                               columns: [
                              {}, // 電話
                              {} // ファックス
                             ]
                            }                             
                           ]
                         }
                        ]
                    }
                ]
            });
        });
    </script>

    これにより、連絡先と地域情報をグループ化する列データバンドが設定されます。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、列がヘッダーの列バンドでグループ化されることを確認します。たとえば、住所情報がグループ化されます。

 

 

Copyright © GrapeCity inc. All rights reserved.