diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md new file mode 100644 index 0000000000..45ca75545a --- /dev/null +++ b/components/table/demo/row-selection-and-operation.md @@ -0,0 +1,83 @@ +# 选择和操作 + +- order: 4 + +选择后进行操作,完成后清空选择,通过 `rowSelection.selectedRowKeys` 来控制选中项。 + +--- + +````jsx +import { Table, Button } from 'antd'; + +const columns = [{ + title: '姓名', + dataIndex: 'name', + render: function(text) { + return {text}; + } +}, { + title: '年龄', + dataIndex: 'age' +}, { + title: '住址', + dataIndex: 'address' +}]; + +const data = [{ + key: '1', + name: '胡彦斌', + age: 32, + address: '西湖区湖底公园1号' +}, { + key: '2', + name: '胡彦祖', + age: 42, + address: '西湖区湖底公园1号' +}, { + key: '3', + name: '李大嘴', + age: 32, + address: '西湖区湖底公园1号' +}]; + +const App = React.createClass({ + getInitialState() { + return { + selectedRowKeys: [], + loading: false, + }; + }, + start() { + this.setState({ loading: true }); + // 模拟 ajax 请求,完成后清空 + setTimeout(() => { + this.setState({ + selectedRowKeys: [], + loading: false, + }); + }, 1000); + }, + onSelectChange(selectedRowKeys) { + console.log('onSelectChange', selectedRowKeys) + this.setState({ selectedRowKeys }); + }, + render() { + const { loading, selectedRowKeys } = this.state; + const rowSelection = { + selectedRowKeys, + onChange: this.onSelectChange, + }; + const hasSelected = selectedRowKeys.length > 0; + return
+
+ + {hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''} +
+ + ; + } +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/table/demo/row-selection-radio-props.md b/components/table/demo/row-selection-radio-props.md deleted file mode 100644 index ac87677e68..0000000000 --- a/components/table/demo/row-selection-radio-props.md +++ /dev/null @@ -1,62 +0,0 @@ -# 单选 - -- order: 4 - -配置单选框的默认属性。 - ---- - -````jsx -import { Table } from 'antd'; - -const columns = [{ - title: '姓名', - dataIndex: 'name', - render: function(text) { - return {text}; - } -}, { - title: '年龄', - dataIndex: 'age' -}, { - title: '住址', - dataIndex: 'address' -}]; -const data = [{ - id: '1', - name: '胡彦斌', - age: 32, - address: '西湖区湖底公园1号' -}, { - id: '2', - name: '胡彦祖', - age: 42, - address: '西湖区湖底公园1号' -}, { - id: '3', - name: '李大嘴', - age: 32, - address: '西湖区湖底公园1号' -}]; - -// 通过 rowSelection 对象表明需要行选择 -const rowSelection = { - type: 'radio', - getCheckboxProps: function(record) { - return { - defaultChecked: record.name === '李大嘴', // 配置默认勾选的列 - disabled: record.name === '胡彦祖' // 配置无法勾选的列 - }; - }, - onSelect: function(record, selected, selectedRows) { - console.log(record, selected, selectedRows); - }, -}; - -function rowKey(record) { - return record.id; -} - -ReactDOM.render(
-, mountNode); -```` diff --git a/components/table/index.jsx b/components/table/index.jsx index 58e8e1811a..c2c0e73049 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -23,7 +23,7 @@ let AntTable = React.createClass({ getInitialState() { return { // 减少状态 - selectedRowKeys: [], + selectedRowKeys: this.props.selectedRowKeys || [], filters: {}, selectionDirty: false, sortColumn: '', @@ -81,16 +81,29 @@ let AntTable = React.createClass({ pagination: objectAssign({}, this.state.pagination, nextProps.pagination) }); } - // 外界只有 dataSource 的变化会触发新请求 + // dataSource 的变化会清空选中项 if ('dataSource' in nextProps && nextProps.dataSource !== this.props.dataSource) { this.setState({ selectionDirty: false, - selectedRowKeys: [], }); - if (this.props.rowSelection && this.props.rowSelection.onChange) { - this.props.rowSelection.onChange([]); - } + this.setSelectedRowKeys([]); + } + if (nextProps.rowSelection && + 'selectedRowKeys' in nextProps.rowSelection) { + this.setState({ + selectedRowKeys: nextProps.rowSelection.selectedRowKeys || [], + }); + } + }, + + setSelectedRowKeys(selectedRowKeys) { + if (this.props.rowSelection && + !('selectedRowKeys' in this.props.rowSelection)) { + this.setState({ selectedRowKeys }); + } + if (this.props.rowSelection && this.props.rowSelection.onChange) { + this.props.rowSelection.onChange(selectedRowKeys); } }, @@ -146,11 +159,11 @@ let AntTable = React.createClass({ } }); const newState = { - selectedRowKeys: [], selectionDirty: false, filters }; this.setState(newState); + this.setSelectedRowKeys([]); this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState))); }, @@ -167,9 +180,9 @@ let AntTable = React.createClass({ }); } this.setState({ - selectedRowKeys, - selectionDirty: true + selectionDirty: true, }); + this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelect) { let data = this.getCurrentPageData(); let selectedRows = data.filter((row, i) => { @@ -177,9 +190,6 @@ let AntTable = React.createClass({ }); this.props.rowSelection.onSelect(record, checked, selectedRows); } - if (this.props.rowSelection.onChange) { - this.props.rowSelection.onChange(selectedRowKeys); - } }, handleRadioSelect: function (record, rowIndex, e) { @@ -189,10 +199,10 @@ let AntTable = React.createClass({ let key = this.getRecordKey(record, rowIndex); selectedRowKeys = [key]; this.setState({ - selectedRowKeys, radioIndex: key, - selectionDirty: true + selectionDirty: true, }); + this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelect) { let data = this.getCurrentPageData(); let selectedRows = data.filter((row, i) => { @@ -200,9 +210,6 @@ let AntTable = React.createClass({ }); this.props.rowSelection.onSelect(record, checked, selectedRows); } - if (this.props.rowSelection.onChange) { - this.props.rowSelection.onChange(selectedRowKeys); - } }, handleSelectAllRow(e) { @@ -228,18 +235,15 @@ let AntTable = React.createClass({ }); } this.setState({ - selectedRowKeys, - selectionDirty: true + selectionDirty: true, }); + this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelectAll) { let selectedRows = data.filter((row, i) => { return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0; }); this.props.rowSelection.onSelectAll(checked, selectedRows); } - if (this.props.rowSelection.onChange) { - this.props.rowSelection.onChange(selectedRowKeys); - } }, handlePageChange(current) { @@ -250,15 +254,11 @@ let AntTable = React.createClass({ pagination.current = pagination.current || 1; } const newState = { - // 防止内存泄漏,只维持当页 - selectedRowKeys: [], selectionDirty: false, pagination }; this.setState(newState); - if (this.props.rowSelection && this.props.rowSelection.onChange) { - this.props.rowSelection.onChange([]); - } + this.setSelectedRowKeys([]); this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState))); },