序章
jqGrid の外部のブラウザーに ajax 経由で JSON オブジェクトを読み込みます。datatype: "local"
次に、次を使用して JSON をグリッドにロードします。これは初期設定です。
$("#myGrid").jqGrid("setGridParam", {datatype: "json", loadonce: true});
$("#myGrid")[0].addJSONData(jsonObject);
$("#myGrid").jqGrid("setGridParam", {datatype: "local", loadonce: true});
上記はグリッドをだまして、jqGrid が自動的に呼び出しを行うことなく JSON オブジェクトをロードできるようにします (これがデフォルトの動作です)。
サーバー側のページネーションを実装することは理想的ですが、私の場合は現在実現できません。
質問
JSON から約 10 ~ 20k 行をグリッドにロードする必要があります。しかし、それには数秒かかります。パフォーマンスを向上させるために、JSON オブジェクトから一度に 1,000 行を追加しようとしています (これは高速で、ブラウザーを停止しません)。しかし、手元にある JSON オブジェクトでそれを行う方法がわかりません。 . 最初の1k行をグリッドにロードしますが、ページャーを適切に更新せず、addJSONData
.
$("#myGrid").jqGrid({
jsonReader: {
page: function(json) { return 1; },
records: function(json) { return json.records; },
repeatitems: false,
root: "objects",
total: function(json) { return json.totalPages; }
},
// . . .
}
$.jgrid.extend({
loadJsonFirstPageOnly: function(json) {
return this.each(function() {
// copy the first page of data into a truncated JSON object to load into the grid
var resultsPerPage = $("#" + this.id + "_ResultsPerPage").val();
var numberOfPages = parseInt(json.objects.length / resultsPerPage);
var firstPageData = {"objects": [], "pages": numberOfPages, "records": json.objects.length};
for (var i = 0; i < 1000 && i < json.objects.length; i++) {
firstPageData.objects[i] = json.objects[i];
}
// load the truncated JSON object into the grid
var $this = $(this).jqGrid("setGridParam", {datatype: "json", loadonce: true});
this.addJSONData(firstPageData);
$this.jqGrid("setGridParam", {datatype: "local", loadonce: true});
// adjust the grid's internal state
this.p.allData = json;
});
}
});
何かご意見は?ありがとう!