JQGrid 子网格所有行显示整个网格的第一行数据

Question

我正在尝试实现 3 级嵌套网格，绑定到数组的数据看起来不错。子网格返回 NULL 数据。这是代码

   var removeSubgridIcon = function () {
            var $this = $(this),
                idPrefix = $this.jqGrid("getGridParam", "idPrefix");
            $this.find(">tbody>tr.jqgrow>td.ui-sgcollapsed").filter(function () {
                var rowData = $this.jqGrid("getLocalRow",
                                           $.jgrid.stripPref(idPrefix, $(this).closest("tr.jqgrow").attr("id")));
                return rowData.subgrid === null;
            }).unbind("click").html("");
        };

        var isHasSubrids = function (data) {

            if (data == null) { return false; }
            else
            {
                var l = data.length, i;
                for (i = 0; i < l; i++) {
                    if (data[i].subgrid !== null) {
                        return true;
                    }
                }
            }

        };

        $gridName.jqGrid({
            datatype: 'local',
            data: records,
            colNames: ['ContractId', 'Description', 'Status', 'Classification', 'Start Date', 'End Date', 'Cancel Date'], // #PF - add opp id column later
            colModel: [
                { name: 'contractid', width: 100, fixed: true },
                // #PFG - 3/17/2014 - LATER { name: 'opportunity', index: 'opportunity', width: 100, fixed: true }, 
                { name: 'description', width: 200, fixed: true },
                { name: 'status', autowidth: true, align: 'center' },
                { name: 'classification', align: 'center' },
                { name: 'startdate', align: 'center' },
                { name: 'enddate', align: 'center' },
                { name: 'canceldate', align: 'center' }
            ],
            gridview: true,
            idPrefix: "m",
            rownumbers: true,
            autoencode: true,
            viewrecords: true,
            sortname: 'contractid',
            sortorder: 'desc',
            height: '100%',
            subGrid: isHasSubrids(records),
            loadComplete: function () {
                removeSubgridIcon.call(this);
            },
            subGridRowExpanded: function (subgridDivId1, rowId1) {
                var $subgrid1 = $("<table id='" + subgridDivId1 + "_t'></table>"),
                    localRowData1 = $(this).jqGrid("getLocalRow", rowId1);
                $subgrid1.appendTo("#" + $.jgrid.jqID(subgridDivId1));
                $subgrid1.jqGrid({
                    datatype: 'local',
                    data: localRowData1.subgrid,
                    colNames: ['ContractLineId', 'Item Name', 'Start Date', 'End Date', 'Cancel Date', 'Description', 'Vendor Name', 'IsShipped'],
                    colModel: [
                        { name: "contractlineid", width: 130, key: true, fixed: true },
                        { name: "itemname", fixed: true, align: 'center' },
                        { name: "startdate", fixed: true, align: 'center' },
                        { name: "enddate", fixed: true, align: 'center' },
                        { name: "canceldate", fixed: true, align: 'center' },
                        { name: "description", width: 330, fixed: true, align: 'center' },
                        { name: "vendorname", fixed: true, align: 'center' },
                        { name: "isshipped", fixed: true, align: 'center' }
                    ],
                    gridview: true,
                    idPrefix: "s" + rowId1 + "_",
                    rowNum: 300,
                    rownumbers: true,
                    autoencode: true,
                    sortname: 'contractlineid',
                    sortorder: "desc",
                    height: "100%",
                    //loadComplete: removeSubgridIcon,
                    subGrid: isHasSubrids(localRowData1.subgrid),
                    subGridOptions: {
                        "plusicon": "ui-icon-triangle-1-e",
                        "minusicon": "ui-icon-triangle-1-s",
                        "openicon": "ui-icon-arrowreturn-1-e",
                        // load the subgrid data only once
                        // and the just show/hide
                        "reloadOnExpand": false,
                        // select the row when the expand column is clicked
                        "selectOnExpand": true
                    },
                    subGridRowExpanded: function (subgridDivId2, rowId2) {
                        // Sub grid2 holding product details
                        var $subgrid2 = $("<table id='" + subgridDivId2 + "_t'></table>"),
                            localRowData2 = $(this).jqGrid("getLocalRow", rowId2);
                        $subgrid2.appendTo("#" + $.jgrid.jqID(subgridDivId2));
                        $subgrid2.jqGrid({
                            datatype: 'local',
                            data: localRowData2.subgrid,
                            colNames: ['ProductId', 'Name', 'Description'],
                            colModel: [
                                { name: "productid", key: true, fixed: true, align: 'center' },
                                { name: "name", fixed: true, align: 'center' },
                                { name: "description", width: 500, fixed: true, align: 'center' }
                            ],
                            gridview: true,
                            autowidth: true,
                            idPrefix: "s" + rowId1 + "_" + rowId2 + "_",
                            rownumbers: true,
                            autoencode: true,
                            sortname: 'productid',
                            sortorder: "desc",
                            height: '100%',
                            subGrid: isHasSubrids(localRowData2.subgrid),
                            subGridOptions: {
                                "plusicon": "ui-icon-triangle-1-e",
                                "minusicon": "ui-icon-triangle-1-s",
                                "openicon": "ui-icon-arrowreturn-1-e",
                                // load the subgrid data only once
                                // and the just show/hide
                                "reloadOnExpand": false,
                                // select the row when the expand column is clicked
                                "selectOnExpand": true
                            }
                            //loadComplete: removeSubgridIcon
                        });
                    }
                });
            }
        });


            //============================================================
            // set grid width
            //============================================================
        $gridName.setGridWidth($('#account-page').width() - 15, true);
    } else {
        $('#account-contract-content').html('No records exists.');
    }

data：records有整个树形结构

localRowData1 = $(this).jqGrid("getLocalRow", rowId1);

localRowData1 没有获取任何子网格行 subGrid: isHasSubrids(localRowData1.subgrid) 这里 localRowData1.subgrid 返回 NULL

这就是我的数据的样子：

 -0:Object
  |
  |  -0:Object
  |   |
  |   |     -0:Object
  |   |      |
  |   |      |
  |   |       Description:
  |   |       Name:
  |   |       Prouductid:
  |   |
  |   |      1:Object
  |   | 
  |   |      2:Object
  |   |        
  |   |      3:Object
  |   |
  |   |
  |   |
  |    canceldate:
  |    contractlineid:
  |    Description:
  |    EndDate:
  |    Isshipped:
  |  
  |   +1:Object
  |   
  |   +2:Object
  |
  |   +3:Object
  |   
  |
  | 
  |
   canceldate:
   classification:
   contractid:
   description:
   enddate:
   startdate:
   status:

  +1:Object

  +2:Object

  +3:Object

Answer 1

使用addRowData 用数据填充网格是非常糟糕的选择。这不仅是最慢的方式。您多次使用addRowData 使用i + 1 作为rowid。如果你这样做了，那么在colModel 中定义的key 属性将被忽略。取而代之的是值 1,2,3... 将被使用。在使用 subgids 的情况下，您将有很多 id 重复，这是邪恶的。

我强烈建议您使用data 参数填充网格。在这种情况下，jqGrid 会根据sortname 和sortorder 参数的值自动对数据进行排序。它也自动进行数据分页。填充网格后无需额外调用.trigger('reloadGrid')。

即使您使用与数据的本机表示相对应的正确 id 值，您仍然可以在不同的子网格或主网格和某些子网格之间有 id 重复。因此，强烈建议为每个网格和每个子网格使用唯一的idPrefix。请参阅the answer 或this one 了解更多详情。

更新：我将您的 jsfiddle 演示修复为以下工作代码：http://jsfiddle.net/OlegKi/1ggvpukb/5/