1

私は Azure サービスからのデータで jqGrid (inlineNav) を使用しており、Azure Mobile Services でサーバー側の並べ替えとページングを使用する方法を学ぶことに興味があります。

これについての考えを共有してください。

4

1 に答える 1

3

Windows Azure Mobile Services は、対応するアクセス用に構成したテーブルのデータを取得/挿入/編集/削除するために使用できる REST API を提供します (ドキュメントを参照してください)。クエリ レコード操作リクエストは、HTTP GET 動詞を使用します。Open Data Protocol (OData) URI オプション$orderby、$skip、$topおよび$inlinecountjqGrid への入力に使用できるオプションをサポートしています。

$("#list4").jqGrid({
    url : 'https://mohit.azure-mobile.net/tables/Schedules',
    datatype: "json",
    height: "auto",
    colModel: [
        { name: "RouteId", width: 50 },
        { name: "Area", width: 130 }
    ],
    cmTemplate: {editable: true, editrules: { required: true}},
    rowList: [10, 20, 30],
    rowNum: 10,
    prmNames: { search: null, nd: null },
    ajaxGridOptions: {
        contentType: "application/json",
        headers: {
            "X-ZUMO-APPLICATION": "myKey"
        }
    },
    serializeGridData: function (postData) {
        if (postData.sidx) {
            return {
                $top: postData.rows,
                $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
                $orderby: postData.sidx + " " + postData.sord,
                $inlinecount: "allpages"
            };
        } else {
            return {
                $top: postData.rows,
                $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
                $inlinecount: "allpages"
            };
        }
    },
    beforeProcessing: function (data, textStatus, jqXHR) {
        var rows = parseInt($(this).jqGrid("getGridParam", "rowNum"), 10);
        data.total = Math.ceil(data.count/rows);
    },
    jsonReader: {
        repeatitems: false,
        root: "results",
        records: "count"
    },
    loadError: function (jqXHR, textStatus, errorThrown) {
        alert('HTTP status code: ' + jqXHR.status + '\n' +
            'textStatus: ' + textStatus + '\n' +
            'errorThrown: ' + errorThrown);
        alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
    },
    pager: "#pager1",
    sortname: "Area",
    viewrecords: true,
    caption: "Schedule Data",
    gridview: true
});

上記のコードに対するいくつかのコメント:

  • sortable: false列ヘッダーをクリックしてグリッドをソートできるように削除しました
  • オプションに関してはprmNames、サーバーへの不要なパラメーターの送信を削除するか、名前を変更できます。以前はとオプションのprmNames: { search: null, nd: null }送信を拒否していました。を使用して他の 2 つのパラメーターの名前を変更することもできますが、使用する必要がある後に計算して追加する必要があるためです。したがって、この場合、他のパラメーターの名前を変更する必要はありません。_searchndsort: "$orderby", rows: "$top"$skipsordsidxserializeGridData
  • を使用serializeGridDataして、サーバーに送信されるオプションのリストを作成します。
  • ajaxGridOptionsサーバーへのアクセスのために jqGrid を内部的に実行する jQuery.ajax リクエストの追加パラメーターを設定するために使用されます。Content-Type: application/jsonサンプル セットとX-ZUMO-APPLICATION: myKeyHTTP ヘッダーで使用するオプション
  • totalサーバーからの応答には(ページの総数)が含まれていないため、応答が処理される前にbeforeProcessing、コールバックを使用して他の情報に基づいてプロパティを埋めます。
  • URL でオプションを使用するため$inlinecount=allpages、サーバーからの応答にはレコードの総数に関する情報が含まれ、データのページはresults応答の一部でラップされます。jsonReader: {repeatitems: false, root: "results", records: "count"}そのため、応答を読み取るために使用します。
  • loadonce: trueサーバーはデータのセット全体ではなく、要求されたデータのページのみを返すため、オプションを削除する必要があります。
于 2013-04-12T19:54:13.750 に答える