jqGrid subGrid如何隐藏"+"如果没有数据子网格，请展开图标 [英] jqGrid subGrid how to hide "+" expand icon if we don't have data sub grid

问题描述

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

When i don't have any data in subgrid i am getting empty grid in subgrid. Also need to hide the expand icon. Below is the code i used.

$(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});
});

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

My output like below screenshot. How to remove the expand icon and subgrid if we don't have any data for subgrid.

是否有任何方法可以实现此行为.我的输出如下.

Is there any way to achieve this behavior. My output like below.

推荐答案

问题的解决方案取决于所使用的jqGrid的版本和分支.我开发了免费的jqGrid 分支，并实现了hasSubgrid回调，我在答案(请参见

The solution of the problem depends on the version and the fork of jqGrid, which you use. I develop free jqGrid fork and have implemented hasSubgrid callback, which I described in the answer (see the demo).

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

The items of your input data contains subgridData property as the array of subgrid data. Thus one should create the subgrid only if subgridData property is defined and subgridData.length > 0. Thus you need just to upgrade to the current version of jqGrid (4.13.4 or 4.13.5pre) and to add the option

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和自定义格式化程序一样非常有效.

to the main grid. The callback subGridOptions.hasSubgrid will be called during building the grid data, thus it works very effective like rowattr, cellattr and custom formatters.

这篇关于jqGrid subGrid如何隐藏"+"如果没有数据子网格，请展开图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！