的jqGrid与亚格和单独的XML文件作为输入

Question

我有这样一个结构的XML文件：

<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和配件网格每个产品的（带有加号图标）。

对于我使用以下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作为参考：“产品>产品>附件>附件> ID”，但它不起作用。

任何人都已经找到了一个可行的例子（实际上我的数据源是grid/subgrid的同一个文件），就像我想要的那样。

希望这个已经够清楚了，否则请不要犹豫，为要求更多细节发表评论。

Answer 1

Subgrids jqGrid的功能主要是为动态填充数据提供的。我的意思是，在加号上的每一次点击，它都会被拨打jQuery.ajax来从服务器获取数据。你想在一个XML响应中获取整个网格和子网格数据（在一个XML文件中）。对于这种情况，我可以建议你两种可选的实现方式。

第一个你可以看到生活here。第二个here。

您网格中所需的第一项更改是使用xmlmap:">id"和xmlmap:">name"而不是xmlmap:"id"和xmlmap:"name"。这是必需的，因为子网格的XML数据具有与主网格相同的XML元素名称。

现在对代码进行一些评论。该解决方案的第一个版本使用subGridUrl与主网格相同的网址。因此，为了能够读取XML数据的正确部分，我修改了每个子网格展开（在subGridBeforeExpand内）的jqGrid的xmlReader.subgrid.root参数。

可以更快速地从服务器加载products.xml文件的方法之一是使用先前请求的本地缓存。要做到这一点jqGrid的prmNames: {nd:null,page:null,rows:null,sort:null,order:null,search:null}参数或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'] 
     } 
    ] 
}); 

另一种解决方案不能使用的xmlReader的subgrid一部分，只是使用subGridRowExpanded在Subgrid as grid的风格，但我用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 
     }); 
    } 
});