Подсетки Функция jqGrid в основном предоставляется для динамически заполненных данных.Я имею в виду, что при каждом нажатии на знак «плюс» будет производиться вызов jQuery.ajax для получения данных с сервера.Вы хотите получить все данные сетки и подсетки в одном XML-ответе (в одном XML-файле).Для этого случая я могу предложить вам два альтернативных способа реализации.
Первый, который вы можете увидеть вживую здесь .Второе здесь .
Первое изменение, которое требуется в вашей сетке, - это использование xmlmap:">id" и xmlmap:">name" вместо xmlmap:"id" и xmlmap:"name".Это необходимо, поскольку данные XML для подсетки имеют те же имена элементов XML, что и основная сетка.
Теперь некоторые комментарии к коду.В первой версии решения используется subGridUrl с тем же URL-адресом, что и для основной сетки.Таким образом, чтобы иметь возможность читать правильную часть данных XML, я изменяю параметр xmlReader.subgrid.root jqGrid при каждом расширении подсетки (внутри subGridBeforeExpand ).
Можно выполнить загрузку продуктовXML-файл с сервера еще быстрее - это одно локальное кэширование предыдущих запросов.Для этого нужно указать либо prmNames: {nd:null,page:null,rows:null,sort:null,order:null,search:null} параметр jqGrid, либо serializeGridData: function() { return ""; }, либо postData:"", которые удаляют все параметры, отправляемые на сервер.Для удаления дополнительных параметров из запроса GET данных подсетки я использую serializeSubGridData: function() {return "";}.
Полный код первого решения приведен здесь:
$("#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']
}
]
});
Другое решение не использует subgrid часть xmlReader и просто используйте subGridRowExpanded в подсетке в виде сетки , но я использую datatype:'xmlstring' вместо datatype:'xml'.В приведенном ниже коде я использую небольшую хитрость, согласно которой datatype:'xmlstring' принимает не только строки в качестве значения параметра datastr.Вместо этого можно использовать чистый XML-анализ данных.Поэтому я сохраняю проанализированные данные XML внутри loadComplete в переменной, а затем просто использую ранее сохраненные проанализированные данные XML.
Полный код второго решения приведен здесь:
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
});
}
});