[英]how to select all raw with pagination in react-bootstrap-table?
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>
);
}
}
当我实现它时,它在表中显示分页并带有所有未选中的复选框。
但是当我单击全选时,它将仅选择当前页面大小的记录。当我从分页控制转到下一页时,未选择其他记录。
当我单击全选复选框时,我想选择所有记录。我该怎么办?
我从这里找到解决方案
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.