我如何获取react-data-grid中“全选”复选框的句柄

时间:2018-08-23 21:55:20

标签: javascript reactjs react-data-grid

当在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>;

2 个答案:

答案 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; //根据选中/未选中返回真/假