在没有 AddJsonRows 的情况下在 jQgrid 中加载本地 JSON 数据 [英] Load local JSON data in jQgrid without AddJsonRows
问题描述
我正在使用 addJsonRows 方法将本地数据添加到 jQgrid.由于此方法禁用排序,我需要另一种解决方案.一个限制:我无法设置 url 并从服务器获取数据,因为数据是通过另一个组件传递的.
下面的代码片段启发了这个案例.注释行显示了限制,我通过定义一个局部变量来替换它以拥有一个测试用例.
<script type="text/javascript" language="javascript">函数 loadPackageGrid() {//从隐藏的输入中获取包网格数据.//var data = eval("("+$("#qsmId").find(".qsm-data-packages").first().val()+")");变量数据 = {页":1",记录":2",行":[{ "id": "83123a", "PackageCode": "83123a" },{ "id": "83566a", "PackageCode": "83566a" }]};$("#packages")[0].addJSONData(data);};$(文档).ready(函数() {$("#packages").jqGrid({col型号:[{名称:'PackageCode',索引:'PackageCode',宽度:110"},{ 名称:'名称',索引:'名称',宽度:300"}],寻呼机:$('#packagePager'),数据类型:本地",行数:10000,观看记录:真实,标题:包",身高:150,pgbuttons:假,加载一次:真});});</脚本>
我想知道如何以其他(更好的)方式来保持排序功能.我尝试了一些数据选项,但没有结果.
我想同样的问题对其他人来说也很有趣.所以我为这个问题 +1.
您至少可以通过两种方式解决问题.第一个你可以使用 datatype: "jsonstring"和 datastr: 数据
.在需要添加额外参数的情况下 jsonReader: { repeatitems: false }
.
第二种方式是使用datatype: "local"
和data: data.rows
.在这种情况下,localReader 将用于读取data.rows
数组中的数据.默认的localReader
可以读取数据.
我对您的数据进行了一些修改:填充了名称"列,并在输入数据中包含了第三项.
现在您可以使用本地分页、排序和过滤/搜索数据.我包含了更多代码来演示这些功能.您可以在下面找到演示中的代码:
$(document).ready(function () {'使用严格';变量数据 = {页":1",记录":3",行":[{id":83123a",名称:名称 1",包代码":83123a"},{id":83432a",名称:名称 3",PackageCode":83432a"},{id":83566a",名称:名称 2",PackageCode":83566a"}]},网格 = $("#packages");grid.jqGrid({col型号:[{名称:'PackageCode',索引:'PackageCode',宽度:110"},{ 名称:'名称',索引:'名称',宽度:300"}],寻呼机:'#packagePager',数据类型:jsonstring",数据str:数据,jsonReader:{重复项:假},行数:2,观看记录:真实,标题:包",高度:自动",忽略大小写:真});grid.jqGrid('navGrid', '#packagePager',{添加:假,假,删除:假},{},{},{},{多搜索:真,多组:真});grid.jqGrid('filterToolbar', { defaultSearch: 'cn', stringResult: true });});
更新:我决定添加更多关于 datatype: "jsonstring"
和 datatype: "local"
方案之间差异的详细信息,因为旧答案被许多读者阅读和投票.
我建议稍微修改上面的代码以更好地显示差异.第一个代码使用 datatype: "jsonstring"
$(function () {使用严格";变量数据 = [{ 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({数据:数据,数据类型:本地",col型号:[{ 名称:包裹代码",宽度:110 },{ 名称:名称",宽度:300 }],寻呼机:#packagePager",行数:2,行列表:[1,2,10],观看记录:真实,行号:真,标题:包",高度:自动",排序名称:名称",自动编码:真,网格视图:是的,忽略大小写:真,onSelectRow: 函数 (rowid) {var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;for (p in rowData) {if (rowData.hasOwnProperty(p)) {str += "propery "" + p + "" + 有值 "" + rowData[p] + "
";}}alert("id="" + rowid + "":
" + str);}});$grid.jqGrid("navGrid", "#packagePager",{添加:假,假,删除:假},{},{},{},{多搜索:真,多组:真});$grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });});
它显示(参见,它使用了datatype: "local"
显示排序数据,所有属性包括复杂对象仍会保存在内部data
中:
上一个演示中使用的代码如下:
$(function () {使用严格";变量数据 = [{ 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({数据:数据,数据类型:本地",col型号:[{ 名称:包裹代码",宽度:110 },{ 名称:名称",宽度:300 }],寻呼机:#packagePager",行数:2,行列表:[1,2,10],观看记录:真实,行号:真,标题:包",高度:自动",排序名称:名称",自动编码:真,网格视图:是的,忽略大小写:真,onSelectRow: 函数 (rowid) {var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;for (p in rowData) {if (rowData.hasOwnProperty(p)) {str += "propery "" + p + "" + 有值 "" + rowData[p] + ""
";}}alert("id="" + rowid + "":
" + str);}});$grid.jqGrid("navGrid", "#packagePager",{添加:假,假,删除:假},{},{},{},{多搜索:真,多组:真});$grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });});
所以我建议使用 datatype: "local"
而不是 datatype: "jsonstring"
.datatype: "jsonstring"
可能只有在一些非常具体的场景中才有一些优势.
I'm using the method addJsonRows to add local data to a jQgrid. As this method disables the sorting I need another solution. One restriction: I can't set the url and fetch the data from the server because the data was passed through another component.
Underneath snippet enlightens the case. The commented line shows the restriction, I replaced it by defining a local variable to have a test case.
<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>
I wonder how I could do this in an other (better) way to keep the sorting feature. I tried something with the data option, without result.
I suppose that the same question is interesting for other persons. So +1 from me for the question.
You can solve the problem in at least two ways. The first one you can use datatype: "jsonstring" and datastr: data
. In the case you need to add additional parameter jsonReader: { repeatitems: false }
.
The second way is to use datatype: "local"
and data: data.rows
. In the case the localReader will be used to read the data from the data.rows
array. The default localReader
can read the data.
The corresponding demos are here and here.
I modified a little your data: filled "Name" column and included the third item in the input data.
Now you can use local paging, sorting and filtering/searching of the data. I included a little more code to demonstrate the features. Below you find the code of one from the demos:
$(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: I decided to add more details about the differences between datatype: "jsonstring"
and datatype: "local"
scenarios because the old answer be read and voted by many readers.
I suggest to modify the above code a little to show better the differences. The fist code uses 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] + "
";
}
}
alert("all properties of selected row having id="" + rowid + "":
" + str);
}
});
$grid.jqGrid("navGrid", "#packagePager",
{ add: false, edit: false, del: false }, {}, {}, {},
{ multipleSearch: true, multipleGroup: true });
$grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});
It displays (see the demo)
One can see unsorted items in the same order like input data. The items of input data will be saved in internal parameters data
and _index
. getLocalRow
method used in onSelectRow
shows that items of internal data
contains only properties of input items which names corresponds to name
property of some jqGrid columns. Additionally unneeded _id_
property will be added.
On the other side the next demo which uses datatype: "local"
displays sorted data and all properties inclusive complex objects will be still saved in the internal data
:
The code used in the last demo is included below:
$(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] + ""
";
}
}
alert("all properties of selected row having id="" + rowid + "":
" + str);
}
});
$grid.jqGrid("navGrid", "#packagePager",
{ add: false, edit: false, del: false }, {}, {}, {},
{ multipleSearch: true, multipleGroup: true });
$grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});
So I would recommend to use datatype: "local"
instead of datatype: "jsonstring"
. datatype: "jsonstring"
could have some advantages only in some very specific scenarios.
这篇关于在没有 AddJsonRows 的情况下在 jQgrid 中加载本地 JSON 数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!