使用自定義復選框實現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)重置行數據

這些更改是在保持網格狀態的同時更新網格的關鍵。