Question

我正在使用带有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;
                }
            }

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

Answer 1

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

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

这样的事情：

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

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

Answer 2

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

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

其中 agGridRef 是对组件的引用：

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

ag-grid - 扩展/折叠树数据

2 个答案: