diff --git a/components/table/demo/local-data.md b/components/table/demo/local-data.md new file mode 100644 index 0000000000000000000000000000000000000000..873c587e89d990d35a5c7e05d11c4439196acb91 --- /dev/null +++ b/components/table/demo/local-data.md @@ -0,0 +1,82 @@ +# 外界控制数据 + +- order: 11 + +由父元素控制自身数据展示。 + +--- + +````jsx +var Table = antd.Table; +var columns = [{ + title: '姓名', + dataIndex: 'name', + render: function(text) { + return {text}; + } +}, { + title: '年龄', + dataIndex: 'age' +}, { + title: '住址', + dataIndex: 'address' +}]; +var data1 = [{ + name: '胡彦斌', + age: 32, + address: '西湖区湖底公园1号' +}, { + name: '胡彦祖', + age: 42, + address: '西湖区湖底公园1号' +}, { + name: '李大嘴', + age: 32, + address: '西湖区湖底公园1号' +}]; +var data2 = [{ + name: '胡彦斌2', + age: 32, + address: '西湖区湖底公园2号' +}, { + name: '胡彦祖2', + age: 42, + address: '西湖区湖底公园2号' +}, { + name: '李大嘴2', + age: 32, + address: '西湖区湖底公园2号' +}]; + + + +var App = React.createClass({ + getInitialState() { + return { + data: [] + }; + }, + handleClick1() { + this.setState({ + data: data1 + }); + }, + handleClick2() { + this.setState({ + data: data2 + }); + }, + render() { + return
+ + +   + + ; + } +}) + +React.render( +, document.getElementById('components-table-demo-local-data')); +```` + diff --git a/components/table/index.jsx b/components/table/index.jsx index b3dbe609c213053aa9ae3d2b83e5493fd318b77d..056f1fadbdba4d4c7288e626064af3006745db1e 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -42,8 +42,9 @@ var AntTable = React.createClass({ selectedRowKeys: [], // only for remote data: [], + dataSource: this.props.dataSource, filters: {}, - loading: !this.isLocalDataSource(), + loading: false, sortColumn: '', sortOrder: '', sorter: null, @@ -69,25 +70,23 @@ var AntTable = React.createClass({ }, componentWillReceiveProps(nextProps) { + let newState = {}; if (('pagination' in nextProps) && nextProps.pagination !== false) { - this.setState({ - pagination: objectAssign({}, this.state.pagination, nextProps.pagination) - }); + newState.pagination = objectAssign({}, this.state.pagination, nextProps.pagination); } - if (!this.isLocalDataSource()) { - // 外界只有 dataSource 的变化会触发请请求 - if (nextProps.dataSource !== this.props.dataSource) { - this.setState({ - selectedRowKeys: [], - loading: true - }, this.fetch); - } + // 外界只有 dataSource 的变化会触发新请求 + if ('dataSource' in nextProps && + nextProps.dataSource !== this.props.dataSource) { + newState = { + selectedRowKeys: [], + dataSource: nextProps.dataSource, + loading: true + }; } if (nextProps.columns !== this.props.columns) { - this.setState({ - filters: {} - }); + newState.filters = {}; } + this.setState(newState, this.fetch); }, hasPagination(pagination) { @@ -98,11 +97,11 @@ var AntTable = React.createClass({ }, isLocalDataSource() { - return Array.isArray(this.props.dataSource); + return Array.isArray(this.state.dataSource); }, getRemoteDataSource() { - return this.props.dataSource; + return this.state.dataSource; }, toggleSortOrder(order, column) { @@ -425,7 +424,7 @@ var AntTable = React.createClass({ getLocalData() { let state = this.state; - let data = this.props.dataSource; + let data = this.state.dataSource; // 排序 if (state.sortOrder && state.sorter) { data = data.sort(state.sorter);