使用自定义复选框实现Ag-Grid行选择

Question

我的ag-Grid表具有以下ColDef ：

const checkboxRenderer: React.SFC<ICellRendererParams> = params => {
  const checked = find(this.state.selectedOptions, x => x.id === params.data.id) != null;
  return (
    <div className="custom__cb">
      <input type="checkbox" checked={checked} />
      <label>
        <span className="custom__cb__label-text">{params.value}</span>
      </label>
    </div>
  );
};

const columnDef: ColDef = 
    colDef.field = 'id';
    colDef.cellRendererFramework = checkboxRenderer;
}

我已经这样定义了ag-Grid表：

onSelectionChanged = (e: SelectionChangedEvent) => {
  const { api } = e;
  if (api) {
    const selectedOptions = api.getSelectedRows();
    this.setState({ selectedOptions });
  }
};

onRowSelected = (e: RowSelectedEvent) => {
  const isAlreadySelected = find(this.state.selectedOptions, x => x.id === e.data.id) != null;
  if (isAlreadySelected) {
    this.setState({ selectedOptions: this.state.selectedOptions.filter(x => x.id !== e.data.id) });
  } else {
    this.setState({ selectedOptions: [...this.state.selectedOptions, e.data] });
  }
};

<AgGridReact
  columnDefs={columnDefs}
  rowData={options}
  onSelectionChanged={this.onSelectionChanged}
  onRowSelected={this.onRowSelected}
  rowSelection="multiple"
/>

这将呈现正确的自定义复选框，并且在选择一行时还可以将组件中的selectedOptions设置为正确。 问题是我的自定义复选框未反映正确的选中状态。 始终未选中。 更改我的状态后，看起来checkboxRenderer并没有重新呈现。

如何实现自定义行选择复选框以正确反映选中状态？

Answer 1

我不确定这与您的问题有关，但是以下是使AgGridReact在状态更改时进行更新的关键：

在<AgGridReact组件上，使用onGridReady属性而不是设置数据，并且还要设置deltaRowDataMode={true}

在componentDidUpdate React组件事件中，有选择地（仅当行数据更改时）通过this.gridApi.setRowData(rowData)重置行数据

这些更改是在保持网格状态的同时更新网格的关键。