带有子网格的 jqGrid 的全局展开/折叠按钮答案

【问题标题】：Global Expand/ collapse button for jqGrid with subgrids带有子网格的 jqGrid 的全局展开/折叠按钮
【发布时间】：2013-10-28 12:39:16
【问题描述】：

我正在使用带有子网格配置的 jqGRid 来显示我的数据。我想要全局展开和折叠按钮来显示或隐藏所有子网格信息。 jqGrid 库是否以任何方式提供此功能？

【问题讨论】：

了解如何创建子网格很重要。您是通过使用选项datatype: "json" 在subGridRowExpanded 内部创建网格来从服务器加载数据，还是您已经为所有子网格加载了数据之前并且您对所有子网格使用datatype: "local"。 expandOnLoad: true 的 subGridOptions 不适用于 datatype: "json"。此外，您应该清除“全局展开/折叠按钮”下的含义。标准 jqGrid GUI 中不存在按钮，但您可以在网格中的某处添加自定义按钮。
@Oleg 嗨，我正在为子网格使用本地数据类型。我只想知道像 + 按钮到单个主网格行以展开和折叠相应的子网格；我可以在网格的左上角有一个 + 按钮，通过设置任何网格属性来展开/折叠所有子网格。正如你所说，没有这样的属性，所以我需要在那里添加我的自定义按钮并将点击事件绑定到它，这将根据需要执行。这是你的建议吗？

标签： jqgrid

【解决方案1】：

jqGrid 没有“全部展开/折叠”。我从the old answer 修改了the demo，它演示了使用本地子网格在网格上创建。生成的演示你可以看到here：

并且它在“subgrids”列的列标题中有额外的“+”按钮。如果单击按钮，所有子网格将被展开：

我在演示中使用了以下代码：

var subGridOptions = $grid.jqGrid("getGridParam", "subGridOptions"),
    plusIcon = subGridOptions.plusicon,
    minusIcon = subGridOptions.minusicon,
    expandAllTitle = "Expand all subgrids",
    collapseAllTitle = "Collapse all subgrids";
$("#jqgh_" + $grid[0].id + "_subgrid")
    .html('<a style="cursor: pointer;"><span class="ui-icon ' + plusIcon +
          '" title="' + expandAllTitle + '"></span></a>')
    .click(function () {
        var $spanIcon = $(this).find(">a>span"),
            $body = $(this).closest(".ui-jqgrid-view")
                .find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable>tbody");
        if ($spanIcon.hasClass(plusIcon)) {
            $spanIcon.removeClass(plusIcon)
                .addClass(minusIcon)
                .attr("title", collapseAllTitle);
            $body.find(">tr.jqgrow>td.sgcollapsed")
                .click();
        } else {
            $spanIcon.removeClass(minusIcon)
                .addClass(plusIcon)
                .attr("title", expandAllTitle);
            $body.find(">tr.jqgrow>td.sgexpanded")
                .click();
        }
    });

【讨论】：

您好 Oleg，您需要修改您的演示。在演示中，如果用户单击全局展开折叠按钮，它将切换父网格行的状态。相反，它应该根据全局按钮的图标触发展开/折叠命令。
@Shaggy：对不起，我不明白你的意思。您在“它切换父网格行的状态”中指的是哪个“状态”？您应该清楚地描述测试用例：应该做什么，预期结果，演示的真实结果。
您好，请在您的演示中执行以下测试用例。 Step-1 展开任意一行以查看子网格。 Step-2 现在点击我们添加到网格中的展开所有子网格按钮。 预期结果所有子网格都应该展开实际结果用户在步骤 1 中未展开的行被展开，展开的行被折叠。我希望现在你已经清楚了。再次感谢您为我项目中的每个 jqGrid 问题提供帮助
您好，我已经更新了展开所有按钮的点击事件的点击事件，以解决我在上一条评论中讨论的问题。

【解决方案2】：

您可以简单地将其设置为如下所示的切换。

按一下按钮。

它调用函数的onlick，比如toggleSubgrid();

function toggleSubgrid(){
    if($('#YOURGRIDID td').hasClass('sgexpanded')){
        $('.ui-icon-minus').trigger('click');
    }
    else if($('#YOURGRIDID td').hasClass('sgcollapsed')){
        $('.ui-icon-plus').trigger('click');
    }
}

【讨论】：

【解决方案3】：

这适用于所有已加载的行。您可能需要根据自己的需要稍微调整选择器的范围。

function expandAll () {
  $( ".tree-plus" ).click();
};
function collapseAll () {
  $( ".tree-minus" ).click();
};

【讨论】：