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

Question

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

Answer 1

jqGrid 没有“全部展开/折叠”。我从旧答案修改了演示，该演示演示了使用本地子网格在网格上创建。您可以在此处看到生成的演示：

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

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

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

Answer 2

您可以简单地使其行为类似于如下切换。

1. 拿一个按钮。

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');
       }
   }
   

Answer 3

这适用于所有已加载的行。您可能需要稍微调整选择器的范围，以满足您的需要。

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