使用自定义复选框实现 ag-Grid 行选择答案

【问题标题】：Implementing ag-Grid row selection with custom checkbox使用自定义复选框实现 ag-Grid 行选择
【发布时间】：2019-07-09 04:26:49
【问题描述】：

我的 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 似乎没有重新渲染。

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

【问题讨论】：

检查this post
@un.spike 感谢您的回复，但那是针对似乎与我的情况无关的单元格编辑。
你能解释一下为什么不吗？

标签： javascript reactjs ag-grid ag-grid-react

【解决方案1】：

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

在<AgGridReact组件上，使用onGridReady属性代替设置数据，同时设置deltaRowDataMode={true}

在componentDidUpdateReact 组件事件中，通过this.gridApi.setRowData(rowData)选择性地（仅当行数据发生变化时）重置行数据

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

【讨论】：