ag-grid - 展开/折叠树数据答案

【问题标题】：ag-grid - expanding/collapsing tree dataag-grid - 展开/折叠树数据
【发布时间】：2017-03-06 08:38:18
【问题描述】：

我在 Angular 1 中使用 ag-grid（免费），并且我已经根据需要显示了我的树数据，其中节点的子节点位于其右侧的列中。但是，我想要做的是双击折叠或展开节点。现在只专注于让它们折叠，因为我的默认视图设置为展开。这是我的双击事件代码，在 $scope.gridOptions 中给出：

onCellDoubleClicked: function(event){ 
                                      event.node.expanded = false;
                                      $scope.gridOptions.api.refreshView();
                                     };

我的假设是，将扩展属性更改为 false 会导致 refreshView 调用重新渲染网格，其中子节点折叠，但双击后视图不变。

另外，我在 gridOptions 中的 getChildNodeDetails：

getNodeChildDetails: function(obj){
                if (obj.children){
                    var nodeType = obj.breakdownCol;
                    return {
                        group: true,
                        expanded: obj.expanded || true,
                        children: obj.children,
                        field: 'name',
                        key: obj[nodeType]
                    }
                } else {
                    return null;
                }
            }

关于如何在不购买企业的情况下解决此问题的任何想法？我知道在企业中您可以对行进行分组，这带有内置的展开/折叠功能。

【问题讨论】：

我假设您正在尝试重新创建 row grouping (example) 而不是 column grouping (example) 对吗？...因为列分组是免费版本的一部分...
@JarodMoser 正确，应该像您在该行分组示例中看到的展开/折叠一样工作。

标签： javascript ag-grid

【解决方案1】：

在我自己的应用程序中，我创建了一个模拟行分组功能的解决方法。它真正做的是adds and removes 来自网格的数据。

此选项的一个缺点是，由于行实际上不在表中，因此无法对未显示的数据进行任何列过滤或排序，这与网格提供的实际企业功能不同.但是，如果您禁用了过滤和排序，那么这个选项是完全可行的。

类似这样的：

function toggleExpansion(index, data) {
    if (insert) {
        gridOptions.api.insertItemsAtIndex(index, data);
    } else {
        gridOptions.api.removeItems(data)
    }
}

我的特定代码进入了更多检查以及与此问题无关的其他事情，但这是对我正在做的工作的简单解释。

【讨论】：

【解决方案2】：

我正在使用 React，但您可能可以使用 Angular 做类似的事情：

function expandAll(expand) {
  agGridRef.current.api.forEachNode((node) => {
    node.setExpanded(expand);
  });
}

其中 agGridRef 是对组件的引用：

<AgGridReact
  ref={agGridRef}
.
.
.
</AgGridReact>

【讨论】：