私は Azure サービスからのデータで jqGrid (inlineNav) を使用しており、Azure Mobile Services でサーバー側の並べ替えとページングを使用する方法を学ぶことに興味があります。
これについての考えを共有してください。
私は Azure サービスからのデータで jqGrid (inlineNav) を使用しており、Azure Mobile Services でサーバー側の並べ替えとページングを使用する方法を学ぶことに興味があります。
これについての考えを共有してください。
Windows Azure Mobile Services は、対応するアクセス用に構成したテーブルのデータを取得/挿入/編集/削除するために使用できる REST API を提供します (ドキュメントを参照してください)。クエリ レコード操作リクエストは、HTTP GET 動詞を使用します。Open Data Protocol (OData) URI オプション$orderby
、$skip
、$top
および$inlinecount
jqGrid への入力に使用できるオプションをサポートしています。
$("#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 つのパラメーターの名前を変更することもできますが、使用する必要がある後に計算して追加する必要があるためです。したがって、この場合、他のパラメーターの名前を変更する必要はありません。_search
nd
sort: "$orderby", rows: "$top"
$skip
sord
sidx
serializeGridData
serializeGridData
して、サーバーに送信されるオプションのリストを作成します。ajaxGridOptions
サーバーへのアクセスのために jqGrid を内部的に実行する jQuery.ajax リクエストの追加パラメーターを設定するために使用されます。Content-Type: application/json
サンプル セットとX-ZUMO-APPLICATION: myKey
HTTP ヘッダーで使用するオプションtotal
サーバーからの応答には(ページの総数)が含まれていないため、応答が処理される前にbeforeProcessing
、コールバックを使用して他の情報に基づいてプロパティを埋めます。$inlinecount=allpages
、サーバーからの応答にはレコードの総数に関する情報が含まれ、データのページはresults
応答の一部でラップされます。jsonReader: {repeatitems: false, root: "results", records: "count"}
そのため、応答を読み取るために使用します。loadonce: true
サーバーはデータのセット全体ではなく、要求されたデータのページのみを返すため、オプションを削除する必要があります。