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)));
},