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