親子關係的JQuery Grid-SubGrid

Question

我需要一些想法，關於如何在下面的sceaniro中實現子網格。

以下是我想要在JQuery Grid和Subgrid中顯示的json數據。 基本上我得到一個叫做「Contact」的對象，它有一個名爲「actionSet」的集合。

{ 
"total" : "10", 
"page" : "1", 
"records" : "78", 
"rows" : [ { 
    "comment" : null, 
    "givenName" : "Contact A", 
    "familyName" : "A", 
    "actionSet" : [ { 
     "actionID" : 1, 
     "actionDueDate" : "2012-12-08", 
     "actionNote" : "Action 1" 
     }, { 
     "actionID" : 2, 
     "actionDueDate" : "2012-12-08", 
     "actionNote" : "Action 2" 
    } ] 
} ...] 

} 

我想eache網格行顯示「聯繫人」和與網格相關聯的子網應顯示「actionSet」集合。

當網格中的特定行被選中時，我不想進行服務器調用來獲取關聯的動作，因爲它們已經全部出現在「動作集」中。

我已經得到了Grid的工作，很好地顯示了「Contacts」，但是我在實現子網格的時候感到困惑，因爲它如何獲取數據，就像它在json中的可用內容一樣。

jq(function() { 
jq("#grid").jqGrid({ 
url:'/smallworks/project/getall.do', 
datatype: 'json', 
mtype: 'GET', 
    colNames:['Id', 'First Name', 'Last Name'], 
    colModel:[ 
    {name:'id',index:'id', width:55,editable:false,editoptions: {readonly:true,size:10},hidden:true}, 
    {name:'givenName',index:'givenName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}, 
    {name:'familyName',index:'familyName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}} 
    ], 
    postData: { 
    }, 
    rowNum:20, 
    rowList:[20,40,60], 
    height: 200, 
    autowidth: true, 
    rownumbers: true, 
    pager: '#pager', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "asc", 
    caption:"Contacts", 
    emptyrecords: "Empty records", 
    loadonce: false, 
    loadComplete: function() { 
    }, 

這是可以實現的嗎？ 我是否需要專門爲子網格解析JSON數據？ 這是如何實現的？

Answer 1

我建議您將actionSet的信息保存在一個對象中，以便日後輕鬆訪問。例如，您可以使用userData參數並填充beforeProcessing中的JSON數據的userdata部分。創建子網格可以按照the answer或another one。

The demo展示了實現方法：

它使用下面的代碼

var mainGridPrefix = "s_"; 

$("#grid").jqGrid({ 
    url: "Adofo.json", 
    datatype: "json", 
    colNames: ["First Name", "Last Name"], 
    colModel: [ 
     { name: "givenName" }, 
     { name: "familyName" } 
    ], 
    cmTemplate: {width: 100, editable: true, editrules: {required: true}, 
     editoptions: {size: 10}}, 
    rowNum: 20, 
    rowList: [20, 40, 60], 
    pager: "#pager", 
    gridview: true, 
    caption: "Contacts", 
    rownumbers: true, 
    autoencode: true, 
    height: "100%", 
    idPrefix: mainGridPrefix, 
    subGrid: true, 
    jsonReader: { repeatitems: false }, 
    beforeProcessing: function (data) { 
     var rows = data.rows, l = rows.length, i, item, subgrids = {}; 
     for (i = 0; i < l; i++) { 
      item = rows[i]; 
      if (item.actionSet) { 
       subgrids[item.id] = item.actionSet; 
      } 
     } 
     data.userdata = subgrids; 
    }, 
    subGridRowExpanded: function (subgridDivId, rowId) { 
     var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"), 
      pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId), 
      subgrids = $(this).jqGrid("getGridParam", "userData"); 

     $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId)); 
     $subgrid.jqGrid({ 
      datatype: "local", 
      data: subgrids[pureRowId], 
      colNames: ["Due Date", "Note"], 
      colModel: [ 
       { name: "actionDueDate", formatter: "date", sorttype: "date" }, 
       { name: "actionNote" } 
      ], 
      sortname: "actionDueDate", 
      height: "100%", 
      rowNum: 10000, 
      autoencode: true, 
      autowidth: true, 
      jsonReader: { repeatitems: false, id: "actionID" }, 
      gridview: true, 
      idPrefix: rowId + "_" 
     }); 
    } 
}); 

修訂：在演示中使用的JSON數據可以看到下面。我添加了jqGrid所需的id屬性。我以前actionID作爲子網格的id：

{ 
    "total": "10", 
    "page": "1", 
    "records": "78", 
    "rows": [ 
     { 
      "id": 10, 
      "comment": null, 
      "givenName": "Contact A", 
      "familyName": "A", 
      "actionSet": [ 
       { 
        "actionID": 1, 
        "actionDueDate": "2012-12-08", 
        "actionNote": "Action 1" 
       }, 
       { 
        "actionID": 2, 
        "actionDueDate": "2012-12-09", 
        "actionNote": "Action 2" 
       } 
      ] 
     }, 
     { 
      "id": 20, 
      "comment": null, 
      "givenName": "Contact B", 
      "familyName": "B", 
      "actionSet": [ 
       { 
        "actionID": 3, 
        "actionDueDate": "2012-12-11", 
        "actionNote": "Action 3" 
       }, 
       { 
        "actionID": 4, 
        "actionDueDate": "2012-12-10", 
        "actionNote": "Action 4" 
       } 
      ] 
     } 
    ] 
}