组件重新加载后扩展的ag grid vue分组集列答案

【问题标题】：ag grid vue grouping set columns expanded after component reload组件重新加载后扩展的ag grid vue分组集列
【发布时间】：2023-03-10 09:21:01
【问题描述】：

我使用 ag-grid 表 - 我正在对列进行分组，例如喜欢：

是否可以将列设置为与重新加载组件后相同的方式？如何保存列如何展开然后重新加载？

【问题讨论】：

标签： vue.js save grouping ag-grid expand

【解决方案1】：

一种方法是存储展开的节点的 ID（我在本地存储中这样做，因为我的表中没有多少行，而且我知道我不会存储任何机密信息）。然后在重新加载时，检索应该展开的节点并展开它们：

<ag-grid-angular
  (rowGroupOpened)="onRowGroupOpened()"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

localStorageKey = 'storage-key-name';

onRowGroupOpened(): void {
    let allExpanded = true;
    const expandedNodeDetails: string[] = [];
    if (this.myGrid.gridApi != null) {
      this.myGrid.gridApi.forEachNode(node => {
        if (node.group || (node.allChildrenCount > 0)) {
          if (!this.restoringExpandedNodes) {
            expandedNodeDetails.push(node.key);
          }
        }
      });
    }

    if (!this.restoringExpandedNodes) {
      localStorage.setItem(this.localStorageKey, JSON.stringify(expandedNodeDetails));
    }
  }

onGridReady(): void {
    this.restoreExpandedNodes();  
  }

restoreExpandedNodes(): void {
    const itemsInStorage = JSON.parse(localStorage.getItem(this.localStorageKey));
    if ((itemsInStorage != null) && (this.myGrid != null) && (this.myGrid.gridApi != null)) {
      this.restoringExpandedNodes = true;
      this.myGrid.gridApi.forEachNode(node => {
        if (node.group || (node.allChildrenCount > 0)) {
          const expandedDetails = this.getExpandedDetails(node, null);
          const index = itemsInStorage.findIndex(storageItem => storageItem === expandedDetails);
          if (index !== -1) {
            node.expanded = true;
          } else if ((itemToSelect != null) && (node.key == itemToSelect.ItemFullName)) {
            node.expanded = true;
          }
        }
      });

      this.myGrid.gridApi.onGroupExpandedOrCollapsed();
      this.restoringExpandedNodes = false;
    }
  }

我不得不清理这段代码，所以如果有什么不合理的地方请告诉我

【讨论】：

拒绝投票者 - 我会很感激您的反馈，以便我改进我的答案