javascript jqGrid 子网格的 JSON 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6649451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSON Object for jqGrid subgrid
提问by AabinGunz
This is my 3rd question about JSON data for jqGrid's subgrid, till now I did not get a single comment. Please somebody help.
这是我关于 jqGrid 子网格的 JSON 数据的第三个问题，直到现在我没有收到一条评论。请有人帮忙。
my 1st question
and the
2nd one
I am having trouble getting to know the json format to be used by a subgrid in jqGrid. In my 2nd question i asked about the format that I should be using for a particular scenario
我无法了解 jqGrid 中的子网格要使用的 json 格式。在我的第二个问题中，我询问了我应该用于特定场景的格式
for the given image
对于给定的图像
Is this the proper JSON String?
这是正确的 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
}
]
};
If yes, my 1st questionthis is where i reached so far
如果是的话，我的第一个问题是到目前为止我到达的地方
$('#compareContent').empty();
$('<div id="compareParentDiv" width="100%">')
.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});
Any type of suggestions/comments/solutions are welcome. Thanks
欢迎任何类型的建议/评论/解决方案。谢谢
My output
我的输出
采纳答案by Oleg
You code has small errors in the declaration of the myJSONObjectvariable and the code which create the contain of the div#compareContentshould be fixed to
您的代码在myJSONObject变量声明中存在小错误，并且创建包含的代码div#compareContent应修复为
$('#compareContent').empty();
$('<div id="compareParentDiv" width="100%">'+
'<table id="list2" cellspacing="0" cellpadding="0"></table>'+
'<div id="gridpager2"></div></div>')
.appendTo('#compareContent');
Small other syntax errors are the trailing commas in the colModel: the comma before ']' should be removed.
其他小的语法错误是 : 中的尾随逗号colModel']' 之前的逗号应该被删除。
Now to your main problem. You should change datastr : myJSONObjectin the subgrid to something like
现在到你的主要问题。您应该datastr : myJSONObject在子网格中更改为
datastr : myJSONObject.list[0]
then the modified demo will show the data: see here.
然后修改后的演示将显示数据：见这里。
One more problem which you has is the absent of ids in your data. You should modify the structure of the data to define the unique ids for very grid row and every subgrid row. You should take in the considerations that ids from the data will be used as id of <tr>elements and HTML don't permit to have id duplicates on one HTML page.
您遇到的另一个问题是数据中缺少 id。您应该修改数据的结构以定义非常网格行和每个子网格行的唯一 ID。您应该考虑到数据中的 id 将用作<tr>元素的id，并且 HTML 不允许在一个 HTML 页面上有重复的 id。
UPDATED: See herean example of modification of your JSON input and the jqGrid so that ids will be used.
更新：请参阅此处修改 JSON 输入和 jqGrid 的示例，以便使用 id。
回答by Rafay
a couple of suggestion that may/maynot workout
一些可能/可能不锻炼的建议
when using subgrid select the grid as
使用子网格时，选择网格为
var mygrid = jQuery("#mygrid")[0];
replace
代替
var grid = jQuery("#list2");
with
和
var grid = jQuery("#list2")[0];
Ref: http://www.trirand.com/blog/?page_id=393/help/2-questions-about-jqgrid-subgrid-and-jsonstring
参考：http: //www.trirand.com/blog/?page_id =393/help/2-questions-about-jqgrid-subgrid-and- jsonstring
also change your json to a validjson
还将您的 json 更改为validjson
{
"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
}
]
}
verfified by www.jsonlint.com
由 www.jsonlint.com 验证
you may find the following link useful
您可能会发现以下链接很有用
