jqGrid subGrid 如果我们没有数据子网格，如何隐藏“+”展开图标

Question

当我在子网格中没有任何数据时，我在子网格中得到空网格。还需要隐藏展开图标。下面是我使用的代码。

$(document).ready(function() {
    'use strict';
    var myData = [
            {
                id: "10",
                c1: "My Value 1",
                c2: "My Value 1.1",
                subgridData: [
                    { id: "10", c1: "aa", c2: "ab" },
                    { id: "20", c1: "ba", c2: "bb" },
                    { id: "30", c1: "ca", c2: "cb" }
                ]
            },
            {
                id: "20",
                c1: "My Value 2",
                c2: "My Value 2.1",
                subgridData: [
                    { id: "10", c1: "da", c2: "db" },
                    { id: "20", c1: "ea", c2: "eb" },
                    { id: "30", c1: "fa", c2: "fb" }
                ]
            },
            {
                id: "30",
                c1: "My Value 3",
                c2: "My Value 3.1"
            }
        ],
        $grid = $("#list"),
        mainGridPrefix = "s_";

    $grid.jqGrid({
        datatype: "local",
        data: myData,
        colNames: ["Column 1", "Column 2"],
        colModel: [
            { name: "c1", width: 180 },
            { name: "c2", width: 180 }
        ],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: "#pager",
        gridview: true,
        ignoreCase: true,
        sortname: "c1",
        viewrecords: true,
        autoencode: true,
        height: "100%",
        idPrefix: mainGridPrefix,
        subGrid: true,
        subGridRowExpanded: function (subgridDivId, rowId) {
            var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId);

            $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
            $subgrid.jqGrid({
                datatype: "local",
                data: $(this).jqGrid("getLocalRow", pureRowId).subgridData,
                colModel: [
                    { name: "c1", width: 178 },
                    { name: "c2", width: 178 }
                ],
                height: "100%",
                rowNum: 10000,
                autoencode: true,
                autowidth: true,
                gridview: true,
                idPrefix: rowId + "_"
            });
            $subgrid.closest("div.ui-jqgrid-view")
                .children("div.ui-jqgrid-hdiv")
                .hide();
        }
    });
    $grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
});

我的输出如下图所示。如果我们没有子网格的任何数据，如何删除展开图标和子网格。

有没有办法实现这种行为。我的输出如下。

Answer 1

问题的解决方案取决于您使用的 jqGrid 的版本和分支。我开发了free jqGrid fork 并实现了hasSubgrid 回调，我在the answer 中进行了描述（参见the demo）。

您的输入数据项包含subgridData 属性作为子网格数据数组。因此，只有在定义了subgridData 属性和subgridData.length > 0 时，才应该创建子网格。因此，您只需升级到当前版本的 jqGrid（4.13.4 或 4.13.5pre）并添加选项

subGridOptions: {
    hasSubgrid: function (options) {
        // the options contains the following properties
        //     rowid - the rowid
        //     iRow - the 0-based index of the row
        //     iCol - the 0-based index of the column
        //     data - the item of the data, with the data of the row
        var subgridData = options.data.subgridData;
        return subgridData != null && subgridData.length > 0;
    }
}

到主网格。回调subGridOptions.hasSubgrid 将在构建网格数据期间调用，因此它像rowattr、cellattr 和自定义格式化程序一样非常有效。