列バンドの追加

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

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

ASP.NET MVC 4 Wijmo アプリケーションを作成します。
ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
依存関係をチェックして、プロジェクトが Wijmo の最新バージョンを参照していることを確認します。これらはページの <head> タグ内に配置されている必要があります。Wijmo の最新バージョンの依存関係は http://wijmo.c1.grapecity.com/download/#wijmo-cdn で確認できます。

以下のマークアップを、@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>

ソースビュー

コードのコピー

<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>

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

前の手順で追加した </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>

ソースビュー

コードのコピー

<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: [
                               {}, // 電話
                                {} // ファックス
                           ]
                   }

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

このトピックの作業結果

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