我的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
似乎没有重新呈现。
如何实现自定义行选择复选框以正确反映选中状态?
答案 0 :(得分:0)
我不确定这与您的问题有关,但是以下是使AgGridReact在状态更改时进行更新的关键:
在<AgGridReact
组件上,使用onGridReady
属性而不是设置数据,还设置deltaRowDataMode={true}
在componentDidUpdate
React组件事件中,有选择地(仅当行数据更改时)通过this.gridApi.setRowData(rowData)
重置行数据
这些更改是在保持网格状态的同时更新网格的关键。