亲子关系的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" 
       } 
      ] 
     } 
    ] 
}