ag-grid 中的动态列配置

Posted 2023-02-18

【中文标题】ag-grid 中的动态列配置

【英文标题】：Dynamic Column configuration in ag-grid

【发布时间】：2020-06-03 16:49:00

【问题描述】：

我正在尝试在 ag-grid 中动态加载表数据。所有列将列在侧边栏（工具面板）复选框中，如果用户单击任何未选中的框，则将向服务器发送请求并获取该列的数据并合并到网格中。

我不确定这是否可以使用 ag-grid 侧边栏来完成。 我正在考虑在侧边栏中捕获点击事件，但找不到任何相关文档。

如果有任何解决方案，请告诉我。

【参考方案1】：

如果您期待来自 ag-grid 的任何活动，我认为 columnVisible 可能会对您有所帮助。

看看这个活生生的例子：https://plnkr.co/edit/KpFQp84rZvJgY2gjKRar?p=preview 取消选中任何列，然后选中。

<AgGridReact
   ...
   onColumnVisible=this.onColumnVisible
/>

  onColumnVisible = params => 
    console.log(params);
    if (params.visible) 
      const colId = params.column.colId;
      alert(colId);
      // you could identify here, which column was checked
      // load data from server for that column
      // make sure you also retrieve ID and then associate the column data with appropriate row, i.e.
     this.yourHttpSvc.getColData(colId).subscribe(response => 
        // iterate through response & rowData appropriately
        this.stats.rowData[key][colId] = response[key][colId];
     )
    
  

希望这会有所帮助！