make selected item can be controlled, #793

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 <a href="#">{text}</a>;
+  }
+}, {
+  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 <div>
+      <div style={{marginBottom: 16}}>
+         <Button type="primary" onClick={this.start}
+           disabled={!hasSelected} loading={loading}>操作</Button>
+         <span style={{marginLeft: 8}}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
+      </div>
+      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+    </div>;
+  }
+});
+
+ReactDOM.render(<App />, mountNode);
+````

components/table/demo/row-selection-radio-props.md

@@ -1,62 +0,0 @@
-# 单选
-
-- order: 4
-
-配置单选框的默认属性。
-
----
-
-````jsx
-import { Table } from 'antd';
-
-const columns = [{
-  title: '姓名',
-  dataIndex: 'name',
-  render: function(text) {
-    return <a href="#">{text}</a>;
-  }
-}, {
-  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(<Table rowSelection={rowSelection} rowKey={rowKey} columns={columns} dataSource={data} />
-, mountNode);
-````

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