我想对于其他人来说同样的问题很有意思。所以对于这个问题,我需要+1。
您可以至少以两种方式解决问题。第一个可以使用datatype: "jsonstring"和datastr: data
。在这种情况下,您需要添加附加参数jsonReader: { repeatitems: false }
。
第二种方法是使用datatype: "local"
和data: data.rows
。如果将使用localReader来读取data.rows
阵列中的数据。默认的localReader
可以读取数据。
相应的演示是here和here。
我修改了一些你的数据:填入“名称”列,并在输入数据中包含第三项。
现在您可以使用本地分页,排序和过滤/搜索数据。我包含了更多的代码来演示这些功能。下面你从演示找到一个的代码:
$(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 });
});
修订:我决定增加约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 });
});
它显示(见the demo)
人们可以看到以相同的顺序等的输入数据未排序项目。输入数据项将保存在内部参数data
和_index
中。 getLocalRow
onSelectRow
中使用的方法显示内部data
的项目仅包含输入项目的属性,其名称对应于某些jqGrid列的name
属性。此外不需要_id_
属性将被添加。
在另一侧the next demo其使用datatype: "local"
显示排序数据和所有属性包容复杂对象将仍保存在内部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"
只有在一些非常特定的情况下才有一些优势。
的回答再次非常感谢!我注意到demolinks是相同的。然而,我没有第二个演示就管理它,也许这对其他人很有用。 – Brecht
@Brecht:不客气!我修复了第二个链接,谢谢! – Oleg
可怕的答案,thanx以@Brecht为好问题。 – sanghavi7