Fix children row selection, close #1212

components/table/demo/expand-children.md

@@ -4,6 +4,8 @@
 
 表格支持树形数据的展示，可以通过设置 `indentSize` 以控制每一层的缩进宽度。
 
+> 注：暂不支持父子数据递归关联选择。
+
 ---
 
 ````jsx
@@ -77,8 +79,21 @@ const data = [{
   address: '我是b',
 }];
 
+// 通过 rowSelection 对象表明需要行选择
+const rowSelection = {
+  onChange(selectedRowKeys, selectedRows) {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+  },
+  onSelect(record, selected, selectedRows) {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll(selected, selectedRows, changeRows) {
+    console.log(selected, selectedRows, changeRows);
+  }
+};
+
 ReactDOM.render(
-  <Table columns={columns} dataSource={data} indentSize={20} />,
+  <Table columns={columns} rowSelection={rowSelection} dataSource={data} />,
   mountNode
 );
 ````

components/table/index.jsx

@@ -8,6 +8,7 @@ import Icon from '../icon';
 import objectAssign from 'object-assign';
 import Spin from '../spin';
 import classNames from 'classnames';
+import { flatArray } from './util';
 
 function noop() {
 }
@@ -78,7 +79,7 @@ let AntTable = React.createClass({
     if (!this.props.rowSelection || !this.props.rowSelection.getCheckboxProps) {
       return [];
     }
-    return this.getCurrentPageData()
+    return this.getFlatCurrentPageData()
       .filter(item => this.props.rowSelection.getCheckboxProps(item).defaultChecked)
       .map((record, rowIndex) => this.getRecordKey(record, rowIndex));
   },
@@ -110,7 +111,7 @@ let AntTable = React.createClass({
       this.setState({ selectedRowKeys });
     }
     if (this.props.rowSelection && this.props.rowSelection.onChange) {
-      const data = this.getCurrentPageData();
+      const data = this.getFlatCurrentPageData();
       const selectedRows = data.filter(
         (row, i) => selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0
       );
@@ -194,7 +195,7 @@ let AntTable = React.createClass({
     });
     this.setSelectedRowKeys(selectedRowKeys);
     if (this.props.rowSelection.onSelect) {
-      let data = this.getCurrentPageData();
+      let data = this.getFlatCurrentPageData();
       let selectedRows = data.filter((row, i) => {
         return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
       });
@@ -214,7 +215,7 @@ let AntTable = React.createClass({
     });
     this.setSelectedRowKeys(selectedRowKeys);
     if (this.props.rowSelection.onSelect) {
-      let data = this.getCurrentPageData();
+      let data = this.getFlatCurrentPageData();
       let selectedRows = data.filter((row, i) => {
         return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
       });
@@ -224,7 +225,7 @@ let AntTable = React.createClass({
 
   handleSelectAllRow(e) {
     const checked = e.target.checked;
-    const data = this.getCurrentPageData();
+    const data = this.getFlatCurrentPageData();
     const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
     const selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
     const changableRowKeys = data.filter(item =>
@@ -334,7 +335,7 @@ let AntTable = React.createClass({
   renderRowSelection() {
     let columns = this.props.columns.concat();
     if (this.props.rowSelection) {
-      let data = this.getCurrentPageData().filter((item) => {
+      let data = this.getFlatCurrentPageData().filter((item) => {
         if (this.props.rowSelection.getCheckboxProps) {
           return !this.props.rowSelection.getCheckboxProps(item).disabled;
         }
@@ -501,8 +502,8 @@ let AntTable = React.createClass({
     return this.props.columns.filter(c => this.getColumnKey(c) === myKey)[0];
   },
 
-  getCurrentPageData(dataSource) {
-    let data = this.getLocalData(dataSource);
+  getCurrentPageData() {
+    let data = this.getLocalData();
     let current;
     let pageSize;
     let state = this.state;
@@ -526,9 +527,13 @@ let AntTable = React.createClass({
     return data;
   },
 
-  getLocalData(dataSource) {
+  getFlatCurrentPageData() {
+    return flatArray(this.getCurrentPageData());
+  },
+
+  getLocalData() {
     let state = this.state;
-    let data = dataSource || this.props.dataSource || [];
+    let data = this.props.dataSource || [];
     // 排序
     if (state.sortOrder && state.sorter) {
       data = data.slice(0);

components/table/util.js

+export function flatArray(data = [], childrenName = 'children') {
+  const result = [];
+  const loop = (array) => {
+    array.forEach(item => {
+      const newItem = { ...item };
+      delete newItem[childrenName];
+      result.push(newItem);
+      if (item[childrenName] && item[childrenName].length > 0) {
+        loop(item[childrenName]);
+      }
+    });
+  };
+  loop(data);
+  return result;
+}

style/components/table.less

@@ -333,11 +333,6 @@
       }
     }
 
-    // Hide selection component in children data
-    &[class*="@{table-prefix-cls}-row-level-"] .@{table-prefix-cls}-selection-column > span {
-      display: none;
-    }
-
     &[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span {
       display: inline-block;
     }