diff --git a/components/table/demo/expand-children.md b/components/table/demo/expand-children.md index 7577deb3ab0e28fefc053dde657ef730c1ae235e..5dc9c1e5296eaca56b31e45540952d45a250dc58 100644 --- a/components/table/demo/expand-children.md +++ b/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( - , +
, mountNode ); ```` diff --git a/components/table/index.jsx b/components/table/index.jsx index 3ac97294dfc393ddcc72247c5230f29051beec7e..6ea2663f46140674e565eb24f3345d690cebdd2b 100644 --- a/components/table/index.jsx +++ b/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); diff --git a/components/table/util.js b/components/table/util.js new file mode 100644 index 0000000000000000000000000000000000000000..f2dfcec48af8052d7c9f63444477821fb68e9e90 --- /dev/null +++ b/components/table/util.js @@ -0,0 +1,15 @@ +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; +} diff --git a/style/components/table.less b/style/components/table.less index f108ee110f2bb1ab2fc7a97369d971f69dcac0e7..9369b54eb3b3bcb0fe514aadf47b85b7727df4be 100644 --- a/style/components/table.less +++ b/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; }