用于父子关系的 JQuery Grid-SubGrid

Posted 2023-02-21

【中文标题】用于父子关系的 JQuery Grid-SubGrid

【英文标题】：JQuery Grid-SubGrid for Parent-Child relation

【发布时间】：2012-12-21 02:40:53

【问题描述】：

我需要一些想法，关于如何在以下场景中实现子网格。

以下是我要在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"
   ]
     ...]

我希望每个网格行都显示“联系人”，并且与网格关联的子网格应该显示“actionSet”集合。

选择网格中的特定行时，我不希望使服务器调用呼叫以获取相关操作，因为它们在“actionset”中存在存在。

我已经让网格正常工作，很好地显示“联系人”，但在实现子网格时我感到困惑，因为它已经在 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 数据？ 如何实现？

【问题讨论】：

我想我可以建议您一些解决问题的方法，但有一点对我来说似乎很奇怪：您发布的 JSON 数据每行都不包含 id 数据。此外，我不了解网格中id 列的值。您打算为用户显示id 还是仅用于内部目的？在最后一种情况下，您只需删除 id 列和 sortname: 'id' 参数。 JSON 输入中的id 属性将用于设置<tr> 元素的id 属性，它们表示网格（html 表格）的行。

嗨奥列格，我将从列中删除 id，这是有道理的，因为它应该用于内部目的，但是我关于子网格的问题仍然存在，以及我真正寻求的想法是什么。我已经阅读了您对其他帖子的回答，它们都很棒。我希望从你那里得到一些指导。

我会将id 属性添加到rows 数组的每个元素，并发布与修改后的数据相对应的答案（稍后）。

【参考方案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"
                
            ]
        
    ]

【讨论】：

您好奥列格，感谢您的回复。我试过了，子网格显示不正确。我可以看看你正在使用的数据。当我试图通过输入警报进行调试时，我发现在函数“beforeProcessing”中，“item.id”是未定义的。可能是您的代码和我的代码之间的数据差异。我附上了上面的图片。

@Adofo：我之前写信给您（请参阅我的 cmets 到您的问题）关于包含 id 属性的要求。我在我使用的演示中做到了这一点。见here。

Thanx Oleg，我的 JSON 坏了，我会修复它并重试，我会及时通知您。我敢肯定，那些 JSON 很好，它会工作。

@Adofo：您不应该编辑 my 答案。取而代之的是，您可以在 your question 的文本中附加诸如“UPDATED”之类的词和任何其他信息。您应该对其他问题发表评论，以告知有关您问题更改的答案。这是 *** 上的标准方式。

@Adofo：您尝试发布的 JSON 数据仍然不包含 id 属性。