Полагаю, этот же вопрос интересен для других людей.Так что +1 от меня за вопрос.
Вы можете решить проблему как минимум двумя способами.Первый вы можете использовать тип данных: "jsonstring" и datastr: data.В случае, если вам нужно добавить дополнительный параметр jsonReader: { repeatitems: false }.
Второй способ заключается в использовании datatype: "local" и data: data.rows.В случае, если localReader будет использоваться для чтения данных из массива data.rows.По умолчанию localReader может читать данные.
Соответствующие демонстрации: здесь и здесь .
Я немного изменил ваши данные: заполнено«Имя» столбца и включили третий элемент во входные данные.
Теперь вы можете использовать локальный пейджинг, сортировку и фильтрацию / поиск данных.Я включил немного больше кода, чтобы продемонстрировать возможности.Ниже вы найдете код одного из демоверсий:
$(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 });
});
Он отображает (см. демо )
Видно несортированные элементы в том же порядке, что и входные данные.Элементы входных данных будут сохранены во внутренних параметрах data и _index.Метод getLocalRow, используемый в onSelectRow, показывает, что элементы внутреннего data содержат только свойства входных элементов, имена которых соответствуют свойству name некоторых столбцов jqGrid.Дополнительно будет добавлено ненужное свойство _id_.
С другой стороны следующее демо , которое использует 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" может иметь некоторые преимущества только в некоторых очень специфических сценариях.