带有子网格和单个XML文件作为输入的JqGrid [英] JqGrid with subgrid and single XML file as input
问题描述
我有一个XML文件，其结构如下:
I have an XML file having a structure like this:
<products>
<product>
<id>P1</id>
<name>PRODUCT 1</name>
<accessories>
<accessory>
<id>acc_1</id>
<name></name>
</accessory>
<accessory>
<id>acc_2</id>
<name></name>
</accessory>
<accessory>
<id>acc_3</id>
<name></name>
</accessory>
</accessories>
</product>
<product>
<id>P2</id>
<name>PRODUCT 2</name>
<accessories>
<accessory>
<id>acc_1</id>
<name>ACC 1</name>
</accessory>
<accessory>
<id>acc_2</id>
<name>ACC 2</name>
</accessory>
</accessories>
</product>
</products>
我希望对每个产品(带有加号图标)使用jqGrid和子网格中的附件将所有产品置于网格中.
I want to have all products in a Grid using jqGrid and the accessories in a subgrid for each product (with the plus icon).
为此，我使用以下js:
For that I use the following js:
var myGrid = $("#prods").jqGrid({
url: 'products.xml',
datatype: "xml",
colNames:["id", "Name"],
colModel:[
{name:"id", key: true, index:"id", width:90, xmlmap:"id", sortable:true},
{name:"Name", index:"Name", width:100, sortable:true, xmlmap:"name"}}
],
width: 300,
height:480,
ignoreCase: true,
viewrecords: true,
loadonce: true,
sortname: 'Name',
sortorder: "asc",
sortable: true,
pager: "#pager",
xmlReader: {
root: "products",
row: "product",
repeatitems: false,
id: "sku",
subgrid: {
root: "products>product>accessories",
row: "accessory",
repeatitems:false,
id: "id"
}
},
caption: "Products",
subGrid: true,
subGridRowExpanded: function(grid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = grid_id + "_t";
jQuery("#" + grid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
jQuery("#" + subgrid_table_id).jqGrid( {
colNames: [ 'Id', 'Name'],
colModel: [
{name:"accid",index:"accid",width:80, xmlmap:"id"},
{name:"accname",index:"accname",width:80, xmlmap:"name"}
],
height: 50,
rowNum:10,
});
}
});
它不显示子记录. 我还尝试将与父网格相同的根/行放在子网格中，并使用如下引用作为ID:"products> product> accessories> accessory> id"，但效果不佳.
It does not shows the subrecords. I tried also to put the same root / row in the subgrid as the parent grid and using the reference like this for the ID: "products>product>accessories>accessory>id" but it does not work as well.
任何人都已经找到了一个像我想要的示例(实际上，我的数据源是网格/子网格的相同文件).
Anybody have already found an example which works (in fact my data source is the same file for both grid/subgrid) like I want.
希望这很清楚，否则请在评论中请求更多详细信息.
Hope this is clear enough, otherwise do not hesitate to comment for requesting more details.
推荐答案
Subgrids feature of jqGrid is mostly provided for dynamically filled data. I mean, that on every click on the plus sign it will be made an jQuery.ajax call to get the data from the server. You want get get the whole grid and subgrid data in one XML response (in one XML file). For the case I can suggest you two alternative implementation ways.
The first one you can see live here. The second one here.
在网格中需要进行的第一个更改是使用xmlmap:">id"和xmlmap:">name"而不是xmlmap:"id"和xmlmap:"name".这是必需的，因为子网格的XML数据具有与主网格相同的XML元素名称.
The first change which required in your grid is the usage of xmlmap:">id" and xmlmap:">name" instead of xmlmap:"id" and xmlmap:"name". It is required because the XML data for the subgrid has the same XML element names like the main grid.
现在对代码进行一些注释.解决方案的第一个版本使用subGridUrl，其URL与主网格相同.为了能够读取XML数据的正确部分，我在每个子网格扩展上都修改了jqGrid的xmlReader.subgrid.root参数(在
Now some comments to the code. The first version of the solution use subGridUrl with the same url like for the main grid. So to be able to read the correct part of the XML data I modify xmlReader.subgrid.root parameter of jqGrid on every subgrid expand (inside of subGridBeforeExpand).
一个可以使用以前的请求的本地缓存来更快地从服务器加载product.xml文件.为此，可以使用jqGrid的prmNames: {nd:null,page:null,rows:null,sort:null,order:null,search:null}参数或serializeGridData: function() { return ""; }或postData:""来删除所有发送到服务器的参数.要从子网格数据的GET请求中删除其他参数，请使用serializeSubGridData: function() {return "";}.
One can make the loading of products.xml file from the server even more quickly is one use local caching of the previous requests. To do this one either prmNames: {nd:null,page:null,rows:null,sort:null,order:null,search:null} parameter of jqGrid or serializeGridData: function() { return ""; } or postData:"" which all remove all parameters sending to the server. To remove additional parameters from the GET request of the subgrid data I use serializeSubGridData: function() {return "";}.
第一个解决方案的完整代码在这里:
The full code of the first solution is here:
$("#prods").jqGrid({
url: 'products.xml',
datatype: "xml",
colNames:["id", "Name"],
colModel:[
{name:"id", index:"id", width:90, xmlmap:">id", key: true},
{name:"Name", index:"Name", width:100, xmlmap:">name"}
],
width: 400,
height:"100%",
ignoreCase: true,
viewrecords: true,
loadonce: true,
sortname: 'Name',
sortorder: "asc",
sortable: true,
pager: "#pager",
xmlReader: {
root: "products",
row: "product",
repeatitems: false,
subgrid: {
row: "accessory",
repeatitems:false,
id: "id"
}
},
subGridBeforeExpand: function(pID, id) {
this.p.xmlReader.subgrid.root =
"products>product:has('id:contains('"+id+"')')>accessories";
},
caption: "Products",
//serializeGridData: function() { return ""; },
//prmNames: {nd:null,page:null,rows:null,sort:null,order:null,search:null},
postData:"",
serializeSubGridData: function() {
// remove parameters like "nd_=1301502998517" and "id=P1"
// appended to the url
return "";
},
subGrid: true,
subgridtype:'xml',
subGridUrl:'products.xml',
subGridModel:[
{
name : ['id','name'],
width : [80,80] ,
align : ['left','left']
}
]
});
另一种解决方案不使用xmlReader的subgrid部分，而仅使用作为网格的子网格中的="nofollow"> subGridRowExpanded a>样式，但我使用datatype:'xmlstring'而不是datatype:'xml'.在下面的代码中，我使用了一个小技巧，即datatype:'xmlstring'不仅接受字符串作为datastr参数的值.可以使用纯XML解析的数据代替它.因此，我将解析后的XML数据保存在loadComplete中的一个变量中，然后仅使用先前保存的解析后的XML数据.
Another solution not use the subgrid part of xmlReader and just use the subGridRowExpanded in the Subgrid as grid style, but I use datatype:'xmlstring' instead of datatype:'xml'. In the code below I use small trick that datatype:'xmlstring' accept not only strings as the value of the datastr parameter. Instead of that one can use pure XML parsed data. So I save the parsed XML data inside of loadComplete in an variable and then just use the previous saved parsed XML data.
第二个解决方案的完整代码在这里:
The full code of the second solution is here:
var myXMLdata;
$("#prods").jqGrid({
url: 'products.xml',
datatype: "xml",
colNames:["id", "Name"],
colModel:[
{name:"id", index:"id", width:90, xmlmap:">id", key: true},
{name:"Name", index:"Name", width:100, xmlmap:">name"}
],
width: 400,
height:"100%",
ignoreCase: true,
viewrecords: true,
rownumbers:true,
loadonce: true,
sortname: 'Name',
sortorder: "asc",
sortable: true,
pager: "#pager",
xmlReader: {
root: "products",
row: "product",
repeatitems: false
},
loadComplete: function(data) {
// test whether we have initial loadind and the "data" has XML type
if (data.nodeType) {
myXMLdata = data; // save original XML data
}
},
caption: "Products",
subGrid: true,
subGridRowExpanded: function(grid_id, row_id) {
var subgrid_table_id = grid_id + "_t";
$("#" + grid_id).html("<table id='" + subgrid_table_id + "''></table>");
$("#" + subgrid_table_id).jqGrid( {
colNames: ['Id', 'Name'],
datatype:'xmlstring',
datastr: myXMLdata,
colModel: [
{name:"accid", index:"accid", width:80, xmlmap:"id", key:true},
{name:"accname", index:"accname", width:80, xmlmap:"name"}
],
xmlReader: {
root:"products>product:has('id:contains('"+row_id+"')')>accessories",
row:">accessory",
repeatitems: false
},
gridview:true,
height: "100%",
rowNum:1000
});
}
});
这篇关于带有子网格和单个XML文件作为输入的JqGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
