ag-grid - 擴展/折疊樹數據

Question

我將 ag-grid（免費）與 Angular 1 一起使用，我已經根據需要顯示我的樹數據，其中節點的子節點位於其右側的列中。 但是，我想要做的是雙擊折疊或展開節點。 現在只是專注於讓它們折疊起來，因為我的默認視圖設置為展開。 這是我在 $scope.gridOptions 中給出的雙擊事件代碼：

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

我的假設是將 expanded 屬性更改為 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

在我自己的應用程序中，我創建了一個模擬行分組功能的解決方法。 它真正做的是從網格中添加和刪​​除數據。

此選項的一個缺點是，由於行實際上不在表中，因此對未顯示的數據實際上無法對列進行任何過濾或排序，這與網格提供的實際企業功能不同。 但是，如果您禁用了過濾和排序，那么這個選項是完全可行的。

像這樣的東西：

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>

Answer 3

我有一個更新作為一個完整的解決方案。

請查看我在 Plnkr 上創建的示例。

基本上您可以使用以下代碼塊來展開和折疊網格上的樹數據：

首先，導入、定義和賦值：

import { GridApi } from 'ag-grid-community';

然后：

gridApi!: GridApi; // variable

constructor() {}

onGridReady(params: GridReadyEvent) {
  this.gridApi = params.api;
  // other codes...
}


expand() {
  this.gridApi.expandAll();
}

collapse() {
  this.gridApi.collapseAll();
}

但是，如果你想折疊和展開特定節點級別的組，你可以使用以下示例：

collapse2ndLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level === 1) {
      node.setExpanded(false);
    }
  });
}

expand2ndLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level < 2 && node.isExpandable) {
      node.setExpanded(true);
    }
  });
}

collapse3rdLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level === 2 && node.isExpandable) {
      node.setExpanded(false);
    }
  });
}

expand3rdLevel() {
  this.gridApi.forEachNode((node) => {
    if (node.level < 3 && node.isExpandable) {
      node.setExpanded(true);
    }
  });
}

請查看我在 Plnkr 上創建的這個示例。