展开/折叠树数据

expanding/collapsing tree data

本文关键字：数据 折叠 展开      更新时间：2023-09-26

我使用ag-grid(免费)与Angular 1，我已经得到了我的树数据显示所需，其中一个节点的子节点是在它的右边的列。然而，我想做的是在双击时折叠或展开节点。现在我只专注于让它们折叠，因为我的默认视图设置为展开。下面是双击事件的代码，在$scope.gridOptions:

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

我的假设是，将expanded属性更改为false将导致refreshView调用重新呈现子节点折叠的网格，但双击后视图不变。

同时，我的getChildNodeDetails在gridOptions:

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

关于我如何解决这个问题没有购买企业的想法吗?我知道在企业中你可以对行进行分组，这是内置的展开/折叠功能。

在我自己的应用程序中，我创建了一个模拟行分组特性的变通方法。它真正做的是从网格中添加和删除数据。

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

像这样:

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

我的具体代码进行了更多的检查和其他与这个问题无关的事情，但这是我所做的工作的简单解释。

我使用的是React，但你也可以用Angular做类似的事情:

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

，其中agGridRef是对组件的引用:

<AgGridReact
  ref={agGridRef}
.
.
.
</AgGridReact>
相关文章：