0

序章

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;
    });
  }
});

何かご意見は?ありがとう!

4

0 に答える 0