ComponentOne Studio MVC5 Classic ヘルプ
グリッドへのデータのロード
MVC Classic ウィジェット > Wijgrid > グリッドへのデータのロード

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

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

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

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

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

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

このトピックの作業結果

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

 

 

Copyright © GrapeCity inc. All rights reserved.