ag-grid 中的动态列配置

Question

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

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

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

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

希望这会有所帮助！