wijgrid の Dataview との連結

グリッドの「クイックスタート」の例に基づき、AjaxDataView オブジェクトを作成し、グリッドの data オプションを使用してバインドできます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、data オプションを設定して AjaxDataView オブジェクトを作成し、IAjaxDataViewOptions フィールドを使用して ajax データ、ページあたりのレコード数（pageSize）、onRequest、および onResponse を設定します。また、pageSize の設定が有効になるように、グリッドの allowPaging オプションを true に設定します。次のスクリプトをコピーし、セクションに貼り付けてください。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid", "wijmo.data.ajax", "knockout.wijmo"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ data: new wijmo.data.AjaxDataView("http://ws.geonames.org/searchJSON", { ajax: { dataType: "jsonp", data: { username: "wijmowidgets", style: "SHORT" } }, pageSize: 10, onRequest: function (settings, shape) { settings.data.startRow = shape.pageSize * shape.pageIndex; settings.data.maxRows = shape.pageSize; }, onResponse: function (response) { return { totalItemCount: response.totalResultsCount, results: response.geonames }; } }), allowPaging: true }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid", "wijmo.data.ajax", "knockout.wijmo"], function () {
    $(document).ready(function () {
    $("#wijgrid").wijgrid({
        data: new wijmo.data.AjaxDataView("http://ws.geonames.org/searchJSON", 
        { 
            ajax: { 
                dataType: "jsonp", 
                data: { 
                    username: "wijmowidgets", 
                    style: "SHORT"
                } 
            }, 
            pageSize: 10,
            onRequest: function (settings, shape) { 
                settings.data.startRow = shape.pageSize * shape.pageIndex; 
                settings.data.maxRows = shape.pageSize; 
            }, 
            onResponse: function (response) { 
                return { 
                    totalItemCount: response.totalResultsCount, 
                    results: response.geonames 
                }; 
            }
        }),
        allowPaging: true
    });
    });
    });
</script>

HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な<div> タグで十分です。
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになります。下部にはページボタンが表示され、データがリモートソースにバインドされています。

関連トピック