当在react-data-grid中选中“全选”复选框时,我想编写一些自定义逻辑。那么,当用户单击该复选框时,如何获得该“全选”复选框的句柄?
这是一些react-data-grid示例http://adazzle.github.io/react-data-grid/#/的链接,也是该仓库的链接。 https://github.com/adazzle/react-data-grid
在我的render()中,我定义了react-data-grid,如下所示。
呈现表格时,表格看起来像react data grid demo
let dataGrid = <ReactDataGrid
ref={node => this.grid = node}
onGridSort={this.handleGridSort}
enableCellSelect={true}
columns={this._columns}
rowGetter={this.rowGetter}
rowsCount={this.getSize()}
minWidth={this.state.width}
minHeight={this.state.height}
rowKey="id"
rowHeight={90}
headerRowHeight={35}
rowSelection={{
showCheckbox: true,
enableShiftSelect: true,
onRowsSelected: this.onRowsSelected,
onRowsDeselected: this.onRowsDeselected,
selectBy: {
indexes: this.state.selectedIndexes
}
}
}
emptyRowsView={EmptyRowsView}
>
</ReactDataGrid>;
答案 0 :(得分:0)
您可以通过计算选择的数量来实现。
由于onRowsSelected: this.onRowsSelected
调用了选择的行数,因此您可以在onRowsSelected()
函数中创建逻辑。
您的函数应如下所示:
onRowsSelected = (rows) => {
this.setState({selectedIndexes: this.state.selectedIndexes.concat(rows.map(r => r.rowIdx))});
let rowIndexes = rows.map(r => r.rowIdx);
let totalSelected = rowIndexes.length + this.state.selectedIndexes.length;
if(this.state.rows.length == totalSelected){
console.log('All rows have been selected');
//You argument here when SelectAll
}
};
答案 1 :(得分:0)
ReactDataGrid公开了一个引用,我们可以在自定义组件中对其进行访问。这样我们可以访问“全选”复选框。
<ReactDataGrid
ref={node => this.grid = node}
... >
</ReactDataGrid>;
在您的自定义组件中,我们可以通过
访问“全选”复选框 this.grid.selectAllCheckbox.checked;
//根据选中/未选中返回真/假