用于父子关系的 JQuery Grid-SubGrid [英] JQuery Grid-SubGrid for Parent-Child relation

问题描述

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

I need some idea, about how to implement a subgrid in the following sceaniro.

以下是我要在JQuery Grid和Subgrid中显示的json数据.基本上我得到一个名为Contact"的对象，它有一个名为actionSet"的集合.

The following is the json data that I want to display in the JQuery Grid and Subgrid. Basically I am getting an object called "Contact" that has a collection called "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"集合.

I want eache Grid row to display the "Contact" and the subgris associated with the grid should display "actionSet" collection.

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

When a particular row in the Grid is selected, I do not want to make a server call to get the associated actions, as they are allready present in the "actionSet".

我已经让网格正常工作，很好地显示了联系人"，但是在实现子网格时我感到困惑，因为它已经在 json 中可用.

I have got the Grid working, displaying the "Contacts" nicely, but I get confused while implement the subgrid, as how to get the data for it, as its allready available in 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 数据?如何实现?

Is this achievable? Do I need to parse JSON data specially for the subgrid? How can this be achieved?

推荐答案

我建议您将 actionSet 中的信息保存在一个对象中，以便以后轻松访问.例如，您可以使用 userData 参数并在 beforeProcessing 内填充 JSON 数据的 userdata 部分.创建子网格您可以按照答案或另一个.

I suggest that you save information from actionSet in an object which you can easy access later. For example you can use userData parameter and fill the userdata part of JSON data inside of beforeProcessing. The create subgrid you can follow the answer or another one.

演示演示实现方式:

它使用以下代码

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:

UPDATED: The JSON data used in the demo one can see below. I added id property which is required for jqGrid. I used actionID as the id of the subgrids:

{
    "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"
                }
            ]
        }
    ]
}

这篇关于用于父子关系的 JQuery Grid-SubGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！