我正在使用addJsonRows方法将本地数据添加到jQgrid。由于此方法禁用排序,我需要另一种解决方案。一个限制:我无法设置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>
我想知道如何以其他(更好)方式保持排序功能。 我尝试使用数据选项,没有结果。
答案 0 :(得分:40)
我认为同样的问题对其他人来说很有意思。所以我可以提出+1问题。
您可以通过至少两种方式解决问题。第一个可以使用datatype: "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 });
});
显示(参见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"
仅在某些非常具体的情况下才有一些优势。
答案 1 :(得分:0)
使用beforeSubmit()函数,您可以在jqgridattempting将数据发布到服务器之间进行干预,同时添加,编辑和删除行。
通过使用beforeSubmit()函数选项,您可以在添加新行时捕获发布的数据并更新本地JSON数据。
beforeSubmit: function (postdata, formid) {
// capture posted data, create JOSN item and add to the JSON array.
customersData.push({ id: guid(), FirstName: postdata.FirstName, LastName: postdata.LastName, sendEmail: postdata.sendEmail });
// Refresh the grid, so that changes to the underlining
// local data array is reflected in the grid.
$('#customerGrid').jqGrid('setGridParam', { datatype: 'local', data: customersData }).trigger('reloadGrid');
// Close the dialog.
try {
$(".ui-icon-closethick").trigger('click');
}
catch (ex) { }
return [false, ''];
}
要获得完整的解决方案,您可以查看working with local data in jqgrid
答案 2 :(得分:-1)
很棒的建议,奥列格。
在我的网络应用中,我预先加载了一些看起来像这样的JSON数据:
{
WorkflowRuns:
[
{
WorkflowRunID: 1000,
WorkflowRunName: "First record",
},
{
WorkflowRunID: 1001,
WorkflowRunName: "Second record",
}
],
UserInformation:
{
Forename: "Mike",
Surname: "Gledhill"
}
}
这里是创建jqGrid所需的代码,仅基于此JSON的WorkflowRuns
部分:
var JSONstring = '{ WorkflowRuns: [ { WorkflowRunID: 1000, .. etc .. } ]';
$("#tblWorkflowRuns").jqGrid({
datatype: "local",
data: JSONstring.WorkflowRuns,
localReader: {
id: "WorkflowRunID",
repeatitems: false
},
...
});
虽然这是一个试验和错误。
例如,jqGrid似乎忽略了datastr: JSONstring
。
请注意,使用本地数据,我需要使用localReader
而非jsonReader
,否则无法正确设置行ID。
希望这有帮助。