ag-grid - ag-grid 中的动态列配置

Question

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

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

请让我知道是否有任何解决方案。

标签： ag-gridag-grid-react

Answer 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];
     })
    }
  }

希望这可以帮助！