AddJsonRowsを使用せずにjQgridにローカルJSONデータをロードする
メソッドaddJsonRowsを使用して、ローカルデータをjQgridに追加しています。この方法ではソートが無効になるため、別のソリューションが必要です。 1つの制限：データが別のコンポーネントを介して渡されたため、URLを設定してサーバーからデータを取得することはできません。
スニペットの下にケースが表示されます。コメント付きの行は制限を示しています。テストケースを持つようにローカル変数を定義することでこれを置き換えました。
<script type="text/javascript" language="javascript">
function loadPackageGrid() {
// Get package grid data from hidden input.
// var data = eval("("+$("#qsmId").find(".qsm-data-packages").first().val()+")");
var data = {
"page": "1",
"records": "2",
"rows": [
{ "id": "83123a", "PackageCode": "83123a" },
{ "id": "83566a", "PackageCode": "83566a" }
]
};
$("#packages")[0].addJSONData(data);
};
$(document).ready(function() {
$("#packages").jqGrid({
colModel: [
{ name: 'PackageCode', index: 'PackageCode', width: "110" },
{ name: 'Name', index: 'Name', width: "300" }
],
pager: $('#packagePager'),
datatype: "local",
rowNum: 10000,
viewrecords: true,
caption: "Packages",
height: 150,
pgbuttons: false,
loadonce: true
});
});
</script>
ソート機能を維持するために他の（より良い）方法でこれをどのように行うことができるのだろうか。結果なしで、データオプションで何かを試しました。
同じ質問が他の人にとっても面白いと思います。質問のために私から+1。
少なくとも2つの方法で問題を解決できます。 datatype： "jsonstring" およびdatastr: dataを使用できる最初の方法。この場合、追加パラメーターjsonReader: { repeatitems: false }を追加する必要があります。
2番目の方法は、datatype: "local"とdata: data.rowsを使用することです。 localReader を使用して、data.rows配列からデータを読み取ります。デフォルトのlocalReaderはデータを読み取ることができます。
データを少し変更しました。「名前」列を埋め、入力データに3番目の項目を含めました。
これで、データのローカルページング、並べ替え、フィルタリング/検索を使用できます。機能を示すためにもう少しコードを含めました。以下に、デモからの1つのコードを示します。
$(document).ready(function () {
'use strict';
var data = {
"page": "1",
"records": "3",
"rows": [
{ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
{ "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
{ "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }
]
},
grid = $("#packages");
grid.jqGrid({
colModel: [
{ name: 'PackageCode', index: 'PackageCode', width: "110" },
{ name: 'Name', index: 'Name', width: "300" }
],
pager: '#packagePager',
datatype: "jsonstring",
datastr: data,
jsonReader: { repeatitems: false },
rowNum: 2,
viewrecords: true,
caption: "Packages",
height: "auto",
ignoreCase: true
});
grid.jqGrid('navGrid', '#packagePager',
{ add: false, edit: false, del: false }, {}, {}, {},
{ multipleSearch: true, multipleGroup: true });
grid.jqGrid('filterToolbar', { defaultSearch: 'cn', stringResult: true });
});
[〜＃〜] updated [〜＃〜]：古い回答を読むため、datatype: "jsonstring"とdatatype: "local"のシナリオの違いに関する詳細を追加することにしましたそして多くの読者によって投票されました。
上記のコードを少し変更して、違いをよりよく示すことをお勧めします。最初のコードはdatatype: "jsonstring"を使用します
$(function () {
"use strict";
var data = [
{ id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },
{ id: "20", Name: "Name 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [4, 5, 6]} },
{ id: "30", Name: "Name 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [7, 8, 9]} }
],
$grid = $("#packages");
$grid.jqGrid({
data: data,
datatype: "local",
colModel: [
{ name: "PackageCode", width: 110 },
{ name: "Name", width: 300 }
],
pager: "#packagePager",
rowNum: 2,
rowList: [1, 2, 10],
viewrecords: true,
rownumbers: true,
caption: "Packages",
height: "auto",
sortname: "Name",
autoencode: true,
gridview: true,
ignoreCase: true,
onSelectRow: function (rowid) {
var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;
for (p in rowData) {
if (rowData.hasOwnProperty(p)) {
str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\n";
}
}
alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);
}
});
$grid.jqGrid("navGrid", "#packagePager",
{ add: false, edit: false, del: false }, {}, {}, {},
{ multipleSearch: true, multipleGroup: true });
$grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});
表示されます（ デモ を参照）
入力データと同じ順序でunsortedアイテムを見ることができます。入力データの項目は、内部パラメーターdataおよび_indexに保存されます。 getLocalRowで使用されるonSelectRowメソッドは、内部dataの項目に、jqGrid列のnameプロパティに対応する名前の入力項目のプロパティのみが含まれることを示します。さらに、不要な_id_プロパティが追加されます。
反対側 次のデモdatatype: "local"を使用してsortedデータを表示し、複雑なオブジェクトを含むすべてのプロパティは引き続き内部data：
最後のデモで使用したコードは次のとおりです。
$(function () {
"use strict";
var data = [
{ id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },
{ id: "20", Name: "Name 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [4, 5, 6]} },
{ id: "30", Name: "Name 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [7, 8, 9]} }
],
$grid = $("#packages");
$grid.jqGrid({
data: data,
datatype: "local",
colModel: [
{ name: "PackageCode", width: 110 },
{ name: "Name", width: 300 }
],
pager: "#packagePager",
rowNum: 2,
rowList: [1, 2, 10],
viewrecords: true,
rownumbers: true,
caption: "Packages",
height: "auto",
sortname: "Name",
autoencode: true,
gridview: true,
ignoreCase: true,
onSelectRow: function (rowid) {
var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;
for (p in rowData) {
if (rowData.hasOwnProperty(p)) {
str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\"\n";
}
}
alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);
}
});
$grid.jqGrid("navGrid", "#packagePager",
{ add: false, edit: false, del: false }, {}, {}, {},
{ multipleSearch: true, multipleGroup: true });
$grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});
したがって、datatype: "local"の代わりにdatatype: "jsonstring"を使用することをお勧めします。 datatype: "jsonstring"には、非常に特殊なシナリオでのみいくつかの利点があります。