如何 select all raw with pagination in react-bootstrap-table?
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>
);
}
}
当我实现它时,它在 Table 中显示分页,在 selection 的所有原始复选框中显示复选框。
但是当我点击select全部时它只会select当前页的记录size.When我从分页控件转到下一页,其他记录没有selected.
我想select点击select全部记录Checkbox.How可以吗?
我从 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>
);
}
}
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>
);
}
}
当我实现它时,它在 Table 中显示分页,在 selection 的所有原始复选框中显示复选框。
但是当我点击select全部时它只会select当前页的记录size.When我从分页控件转到下一页,其他记录没有selected.
我想select点击select全部记录Checkbox.How可以吗?
我从 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>
);
}
}