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

Posted 2023-03-28

【中文标题】组件重新加载后扩展的ag grid vue分组集列

【英文标题】：ag grid vue grouping set columns expanded after component reload

【发布时间】：2021-09-01 01:07:57

【问题描述】：

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

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

【参考方案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;
    
  

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

【讨论】：

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