jquery - 如果在 jqgrid Treegrid 中选择了某个级别行，如何隐藏其他级别

Question

如果在 jqgrid 树形网格中选择了某些行，则所有其他行都会折叠但仍然可见。如何隐藏它们。

例如，如果树结构是

Category1
  Subcategory11
  Subcategory12
  ...
Category2
  Subcategory21
  Subcategory22
  ...
Category3
  Subcategory31
  Subcategory32
  ...

最初它在 jqgrid 中以折叠形式显示

Toggle view
Category1
Category2
Category3

用户可以通过点击打开某个节点。在这种情况下(例如单击类别 2)，应从屏幕中删除其他类别，以便仅此类别及其子类别可见:

Toggle view
Category2
  Subcategory21
  Subcategory22

切换 View 链接应切换单个类别和类别 ListView :第一次单击应再次显示折叠的类别列表。之后，再次单击切换显示所有类别应该仅显示最后打开的类别，如上面的屏幕截图所示。

如何实现这个？

树形网格定义为

       var treegrid = $("#tree-grid");
        treegrid.jqGrid({
            loadComplete: function (data) {
                $('.tree-leaf', $(this)).css('width', '0px');
            },
            url: '/Store/GridData',
            datatype: "json",
            mtype: "POST",
            height: "auto",
            loadui: "disable",
            treeGridModel: "adjacency",
            colModel: [
                    { name: "id", width: 1, hidden: true, key: true },
                    { name: "menu", classes: "treegrid-column", label: "Tootepuu" },
                    { name: "url", width: 1, hidden: true }
                ],

            gridview: true,
            autowidth: true,
            treeGrid: true,
            ExpandColumn: "menu",
            rowNum: 2000,
            ExpandColClick: true,
            onSelectRow: function (rowid) {
                var treedata = treegrid.jqGrid('getRowData', rowid);
                window.location = treedata.url;
            }
        }
                );
        treegrid.parents("div.ui-jqgrid-view").children("div.ui-jqgrid-hdiv").hide();

目前，如果选择某个类别，则它会离开，而主类别列表也可见

Category1
Category2
  Subcategory21
  Subcategory22
Category3

如何为此定制jqgrid？或者可以使用其他一些树插件或 ASP.NET MVC2 控件来实现此目的吗？

Answer 1

您可以像描述的那样捕捉展开事件 here

并使用

$("#"+someRow).css('display') == 'none'

隐藏您想要的所有行。