グリッドへのデータのロード

複数の異なるデータソースから wijgrid ウィジェットにデータを簡単にロードできます。たとえば、DOM テーブル、配列、ハッシュ、またはリモートデータソースを利用できます。例については、Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/grid/DataSources）にアクセスし、MVC コントロールエクスプローラの grid > DataSources サンプルのライブデモをご覧ください。

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

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"> <p>DOM テーブル:</p> <table id="demo-dom"> <thead> <tr> <th>ID</th><th>Company</th><th>Name</th> </tr> </thead> <tbody> <tr> <td>ANATR</td><td>Ana Trujillo Emparedados y helados</td><td>Ana Trujillo</td> </tr> <tr> <td>ANTON</td><td>Antonio Moreno Taqueria</td><td>Antonio Moreno</td> </tr> <tr> <td>AROUT</td><td>Around the Horn</td><td>Thomas Hardy</td> </tr> <tr> <td>BERGS</td><td>Berglunds snabbkop</td><td>Christina Berglund</td> </tr> </tbody> </table> <p>配列:</p> <table id="demo-array"> </table> <p>ハッシュ:</p> <table id="demo-hash"> </table> <p>リモート:</p> <table id="demo-remote"> </table> </div>

ソースビュー

コードのコピー

<div class="main demo">
    <p>DOM テーブル:</p>
    <table id="demo-dom">
        <thead>
            <tr>
                <th>ID</th><th>Company</th><th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>ANATR</td><td>Ana Trujillo Emparedados y helados</td><td>Ana Trujillo</td>
            </tr>
            <tr>
                <td>ANTON</td><td>Antonio Moreno Taqueria</td><td>Antonio Moreno</td>
            </tr>
            <tr>
                <td>AROUT</td><td>Around the Horn</td><td>Thomas Hardy</td>
            </tr>
            <tr>
                <td>BERGS</td><td>Berglunds snabbkop</td><td>Christina Berglund</td>
            </tr>
        </tbody>
    </table>
    <p>配列:</p>
    <table id="demo-array">
    </table>
    <p>ハッシュ:</p>
    <table id="demo-hash">
    </table>
    <p>リモート:</p>
    <table id="demo-remote">
    </table>
</div>

このマークアップは４つのテーブル用のコンテンツを追加します。それぞれがグリッドの作成に使用されます。

前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijgrid ウィジェットを初期化します。

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { // DOM $("#demo-dom").wijgrid(); // 配列 $("#demo-array").wijgrid({ data: [ ["ANATR", "Ana Trujillo Emparedados y helados", "Ana Trujillo"], ["ANTON", "Antonio Moreno Taqueria", "Antonio Moreno"], ["AROUT", "Around the Horn", "Thomas Hardy"], ["BERGS", "Berglunds snabbkop", "Christina Berglund"] ], columns: [ { headerText:"ID" }, { headerText:"Company" }, { headerText:"Name" } ] }); // ハッシュ $("#demo-hash").wijgrid({ data: [ { ID:"ANATR", Company:"Ana Trujillo Emparedados y helados", Name:"Ana Trujillo" }, { ID:"ANTON", Company:"Antonio Moreno Taqueria", Name:"Antonio Moreno" }, { ID:"AROUT", Company:"Around the Horn", Name: "Thomas Hardy" }, { ID:"BERGS", Company:"Berglunds snabbkop", Name:"Christina Berglund" } ] }); // リモート $("#demo-remote").wijgrid({ data:new wijdatasource({ proxy:new wijhttpproxy({ url:"http://ws.geonames.org/searchJSON", dataType:"jsonp", data: { featureClass:"P", style:"full", maxRows: 5, name_startsWith:"ab" }, key:"geonames" }), reader:new wijarrayreader([ { name:"label", mapping:function (item) { return item.name + (item.adminName1 ?", " + item.adminName1 : "") + ", " + item.countryName } }, { name:"name", mapping:"name" }, { name:"countryCode", mapping: "countryCode" }, { name:"continentCode", mapping: "continentCode" } ]) }) }); }); </script>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            // DOM
            $("#demo-dom").wijgrid();
            // 配列
            $("#demo-array").wijgrid({
                data: [
                ["ANATR", "Ana Trujillo Emparedados y helados", "Ana Trujillo"],
                ["ANTON", "Antonio Moreno Taqueria", "Antonio Moreno"],
                ["AROUT", "Around the Horn", "Thomas Hardy"],
                ["BERGS", "Berglunds snabbkop", "Christina Berglund"]
              ],
                columns: [
                 { headerText:"ID" }, { headerText:"Company" }, { headerText:"Name" }
              ]
            });
            // ハッシュ
            $("#demo-hash").wijgrid({
                data: [
                { ID:"ANATR", Company:"Ana Trujillo Emparedados 
y helados", Name:"Ana Trujillo" },
                { ID:"ANTON", Company:"Antonio Moreno Taqueria", Name:"Antonio Moreno" },
                { ID:"AROUT", Company:"Around the Horn", Name: "Thomas Hardy" },
                { ID:"BERGS", Company:"Berglunds snabbkop", Name:"Christina Berglund" }
              ]
            });
            // リモート
            $("#demo-remote").wijgrid({
                data:new wijdatasource({
                    proxy:new wijhttpproxy({
                        url:"http://ws.geonames.org/searchJSON",
                        dataType:"jsonp",
                        data: {
                            featureClass:"P",
                            style:"full",
                            maxRows: 5,
                            name_startsWith:"ab"
                        },
                        key:"geonames"
                    }),
                    reader:new wijarrayreader([
                     { name:"label", mapping:function (item) { return item.name + (item.adminName1 ?", " + item.adminName1 : "") + ", " + item.countryName } },
                     { name:"name", mapping:"name" },
                     { name:"countryCode", mapping: "countryCode" },
                     { name:"continentCode", mapping: "continentCode" }
                  ])
                })            });
        });
</script>

これにより、各グリッドのデータソースが設定されます。

このトピックの作業結果

[F5］を押してアプリケーションを実行し、各グリッドウィジェットが異なるタイプのデータソースにリンクしていることを確認します。これらのデータソースには、DOM テーブル、配列、ハッシュ、およびリモートデータソースが含まれます。