mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
ed455c01d1
* Implement Table.Column and Table.ColumnGroup * Upgrade rc-table
1.9 KiB
1.9 KiB
order | title | ||||
---|---|---|---|---|---|
3 |
|
zh-CN
选择后进行操作,完成后清空选择,通过 rowSelection.selectedRowKeys
来控制选中项。
en-US
To perform operations and clear selections after selecting some rows, use rowSelection.selectedRowKeys
to control selected rows.
import { Table, Button } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
const App = React.createClass({
getInitialState() {
return {
selectedRowKeys: [], // Check here to configure the default column
loading: false,
};
},
start() {
this.setState({ loading: true });
// ajax request after empty completing
setTimeout(() => {
this.setState({
selectedRowKeys: [],
loading: false,
});
}, 1000);
},
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
},
render() {
const { loading, selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
const hasSelected = selectedRowKeys.length > 0;
return (
<div>
<div style={{ marginBottom: 16 }}>
<Button type="primary" onClick={this.start}
disabled={!hasSelected} loading={loading}
>Reload</Button>
<span style={{ marginLeft: 8 }}>{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}</span>
</div>
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
</div>
);
},
});
ReactDOM.render(<App />, mountNode);