的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 
     }); 
    } 
});