jqGrid 子网格的 JSON 对象
Posted
技术标签:
【中文标题】jqGrid 子网格的 JSON 对象【英文标题】：JSON Object for jqGrid subgrid 【发布时间】：2011-10-02 17:30:08 【问题描述】：这是我关于 jqGrid 子网格的 JSON 数据的第三个问题，直到现在我没有得到任何评论。请有人帮忙。
我的1st question还有 2nd one
我无法了解 jqGrid 中子网格要使用的 json 格式。在我的第二个问题中，我询问了我应该在特定场景中使用的格式
对于给定的图像
这是正确的 JSON 字符串吗？
var myJSONObject =
"list": [
"elementName": "TERM",
"attribute": [
"name": "information",
"firstValue": "Required fixes for AIX",
"secondValue": "Required fixes for AIX"
,
"name": "name",
"firstValue": "PHCO_34",
"secondValue": "PHCO_34"
,
"name": "version",
"firstValue": "1.0",
"secondValue": "2.0"
],
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": false
,
"elementName": "Asian-Core.ASX-JPN-MAN",
"attribute": [
"name": "information",
"firstValue": "Man",
"secondValue": "Man"
,
"name": "name",
"firstValue": "Asian-Core.ASX-JPN-MAN",
"secondValue": "Asian-Core.ASX-JPN-MAN"
,
"name": "version",
"firstValue": "B.11.23",
"secondValue": "B.11.23"
],
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": true
]
;
如果是，我的第一个问题这是我目前到达的地方
$('#compareContent').empty();
$('<div id="compareParentDiv" >')
.html('<table id="list2" cellspacing="0" cellpadding="0"></table>'+
'<div id="gridpager2"></div></div>')
.appendTo('#compareContent');
var grid = jQuery("#list2");
grid.jqGrid(
datastr : myJSONObject,
datatype: 'jsonstring',
colNames:['Name','Result1', 'Result2'],
colModel:[
name:'elementName',index:'elementName', width:90,
name:'isPrasentinXml1',index:'isPrasentinXml1', width:100,
name:'isPrasentinXml2',index:'isPrasentinXml2', width:100,
],
pager : '#gridpager2',
rowNum:10,
scrollOffset:0,
height: 'auto',
autowidth:true,
viewrecords: true,
gridview: true,
jsonReader: repeatitems : false, root:"list" ,
subGrid: true,
/*subGridModel: [
//subgrid columns names
name: ['Name', 'Version', 'Information'],
//subgrid columns widths
width: [200, 100, 100],
//subrig columns aligns
align: ['left', 'left', 'left']
]*/
// define the icons in subgrid
subGridOptions:
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
//expand all rows on load
"expandOnLoad" : true
,
subGridRowExpanded: function(subgrid_id, row_id)
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid(
datastr : myJSONObject,
datatype: 'jsonstring',
colNames: ['Name','Value1','Value2'],
colModel: [
name:"name",index:"name",width:90,
name:"firstValue",index:"firstValue",width:100,
name:"secondValue",index:"secondValue",width:100,
],
rowNum:20,
pager: pager_id,
sortname: 'name',
sortorder: "asc",
height: 'auto',
autowidth:true,
jsonReader: repeatitems : false, root:"attribute"
);
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,edit:false,add:false,del:false)
);
grid.jqGrid('navGrid','#gridpager2',add:false,edit:false,del:false);
欢迎任何类型的建议/cmets/解决方案。谢谢
我的输出
【问题讨论】：
你可以在 jsonlint.com 验证 json @3nigma：很好的资源，我还需要知道这个特定的子网格是我的 json 字符串足够好，因为子网格没有被填充 @Oleg: 请看看我的问题 :) 你能发布一个文档链接吗？我认为数据类型应该是json而不是jsonstring
@Abhishek Simon：要向我发送消息，您应该对我写了一些东西的问题/答案写评论。如果您只是在新问题的评论中写下“@Oleg”文本，我不会收到任何通知。详情请见here。
【参考方案1】：
您的代码在myJSONObject 变量的声明中有小错误，创建div#compareContent 包含的代码应修复为
$('#compareContent').empty();
$('<div id="compareParentDiv" >'+
'<table id="list2" cellspacing="0" cellpadding="0"></table>'+
'<div id="gridpager2"></div></div>')
.appendTo('#compareContent');
其他小的语法错误是 colModel 中的尾随逗号：应删除 ']' 之前的逗号。
现在是您的主要问题。您应该将子网格中的 datastr : myJSONObject 更改为类似
datastr : myJSONObject.list[0]
那么修改后的demo会显示数据：见here。
您遇到的另一个问题是数据中缺少 id。您应该修改数据结构以定义非常网格行和每个子网格行的唯一 ID。您应该考虑到数据中的 id 将用作 <tr> 元素的 id，并且 HTML 不允许在一个 HTML 页面上有 id 重复。
更新：请参阅here 修改 JSON 输入和 jqGrid 以便使用 id 的示例。
【讨论】：
感谢您的回复，您的回答让我飞跃了 90%，仍然有 1 个问题，当我有多行时，我只获得了第 1 行子数据，请查看我更新的问题以获取屏幕截图和 json 字符串超过 1 行。 @Oleg: +1 jqgrid 子网格问题 @Abhishek Simon：我修改了the second demo，其中 1) 我为您的数据包含了 id 2) 在jsonReader 中包含 page: function() return 1; 3) 设置 expandOnLoad : false 这是主要问题。在我看来，新设置非常有问题（请参阅我的another answer），我不建议您使用它。
@Oleg：谢谢 Oleg，你是最棒的...解决了我的问题 :)
@Abhishek Simon：不客气！再说一句小话。如果要使用数据分页，则应在数据中包含当前页数和其他分页信息。如果您不使用分页，则应将子网格中的rowNum:10 和rowNum:20 替换为rowNum:10000 之类的较大值。目前，如果您有超过 10 或 20 项数据，则只会显示前 10 或 20 项，您不会看到任何错误或警告。【参考方案2】：
一些可能/可能不会锻炼的建议
当使用子网格时，选择网格为
var mygrid = jQuery("#mygrid")[0];
替换
var grid = jQuery("#list2");
与
var grid = jQuery("#list2")[0];
参考：http://www.trirand.com/blog/?page_id=393/help/2-questions-about-jqgrid-subgrid-and-jsonstring
还将您的 json 更改为 valid json
"list": [
"elementName": "TERM",
"attribute": [
"name": "information",
"firstValue": "RequiredfixesforAIX",
"secondValue": "RequiredfixesforAIX"
,
"name": "name",
"firstValue": "PHCO_34",
"secondValue": "PHCO_34"
,
"name": "version",
"firstValue": "1.0",
"secondValue": "2.0"
],
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": false
]
由 www.jsonlint.com 验证
您可能会发现以下链接很有用
jqGrid with JSON data renders table as empty
【讨论】：
感谢您回复 +1。我在您的链接中检查了我的 JSON 字符串，它是正确的。还有var mygrid = jQuery("#mygrid")[0];我应该用什么替换它？
var grid = jQuery("#list2"); 用于父网格。如果我用var grid = jQuery("#list2")[0]; 替换它，表格将不会显示。以上是关于jqGrid 子网格的 JSON 对象的主要内容，如果未能解决你的问题，请参考以下文章