如何在react-bootstrap-table中选择所有带分页的raw?

时间:2017-11-03 07:07:56

标签: javascript pagination bootstrap-4 rect

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
export default class StudentTable extends React.Component {


  render() {
    const selectRowProp = {
      mode: 'checkbox'
    };

    return (
      <BootstrapTable ref='table' data={ this.state.studentData } selectRow={ selectRowProp } pagination>
          <TableHeaderColumn dataField='id' isKey={ true }>Student ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Student Name</TableHeaderColumn>
          <TableHeaderColumn dataField='city'>City</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

当我实施它时,表格中的分页显示所有原始复选框。

但是当我点击全选时它只会选择当前页面大小的记录。当我从分页控制转到下一页时,其他记录都没有被选中。

当我点击选择所有Checkbox时,我想选择所有记录。我可以吗?

1 个答案:

答案 0 :(得分:0)

我从Here

找到了解决方案
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
export default class StudentTable extends React.Component {
    onSelectAll = (isSelected) => {
     if (isSelected) {
        return this.state.studentData.map(row => row.id);
      } else {
        return [];
      }
   }

  render() {
    const selectRowProp = {
      mode: 'checkbox',
      onSelectAll: this.onSelectAll
    };

    return (
      <BootstrapTable ref='table' data={ this.state.studentData } selectRow={ selectRowProp } pagination>
          <TableHeaderColumn dataField='id' isKey={ true }>Student ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Student Name</TableHeaderColumn>
          <TableHeaderColumn dataField='city'>City</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}