agGrid-如何隐藏动态生成的列

Question

在React agGrid hide: true中，动态生成的列定义不起作用。我的代码段如下：

if(data.length > 0) {
  for (var key in data[0]) {
      var obj = {}
      obj.headerName = key;
      obj.field = key;
      if(obj.field == "action") {
          obj.hide = true;
          obj.suppressToolPanel = true;
      }
      cols.push(obj);
  }
}

root.setState({
  columnDefs: cols,
  rowData : data
}, function(){
  console.log(root.state.columnDefs)
});

我在渲染函数中的agGrid如下：

<AgGridReact
  columnDefs={this.state.columnDefs}
  rowData={this.state.rowData}
  context={this.state.context}
  modules={this.state.modules}
  sideBar={this.state.sideBar}
  defaultColDef={this.state.defaultColDef}
  frameworkComponents={this.state.frameworkComponents}
  onGridSizeChanged={this.onGridSizeChanged.bind(this)}
  onCellClicked={this.onCellClicked.bind(this)}
  onFirstDataRendered={this.onFirstDataRendered.bind(this)}
  onGridReady={this.onGridReady.bind(this)}
>
</AgGridReact>

我错过了什么吗？任何帮助对我都会非常有帮助。

Answer 1

更新列状态的正确方法是使用ColumnApi.setColumnState()

还请注意：

• AgGrid版本<24：使用ColumnApi.setColumnState()
• AgGrid版本> = 24：使用ColumnApi.applyColumnState()

const columnState = columnApi.getColumnState() || [];

columnApi.setColumnState(
  columnState.map((c) => {
    if (Math.random() > 0.5) {
      return { ...c, hide: true };
    }
    return { ...c, hide: false };
  })
);

实时演示