gpt4 book ai didi

jqgrid - 在没有AddJsonRows的情况下在jQgrid中加载本地JSON数据

转载 作者:行者123 更新时间:2023-12-02 10:28:24 25 4
gpt4 key购买 nike

我正在使用方法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>

我不知道如何以其他(更好)的方式来保持排序功能。
我尝试了data选项,但没有结果。

最佳答案

我想这个问题对其他人也很有趣。因此,我可以+1。

您可以通过至少两种方式解决问题。您可以使用datatype: "jsonstring"datastr: data的第一个。在这种情况下,您需要添加其他参数jsonReader: { repeatitems: false }

第二种方法是使用datatype: "local"data: data.rows。在这种情况下,localReader将用于从data.rows数组读取数据。默认的localReader可以读取数据。

相应的示例是herehere

我修改了一些数据:填写了“名称”列,并将第三项包含在输入数据中。

现在,您可以使用本地分页,排序和过滤/搜索数据。我添加了一些代码来演示这些功能。在下面的示例中,您可以找到一个的代码:

$(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_属性。

另一方面,使用 datatype: "local"the next demo会显示 排序的数据,所有包含复杂对象的属性仍将保存在内部 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"仅在某些非常特定的情况下才具有某些优点。

关于jqgrid - 在没有AddJsonRows的情况下在jQgrid中加载本地JSON数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6831306/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com