allow dataSourse controlled by parent in local mode

This commit is contained in:
afc163 2015-08-27 23:55:25 +08:00
parent c799326e7f
commit 6d2dcc4539
2 changed files with 99 additions and 18 deletions

View File

@ -0,0 +1,82 @@
# 外界控制数据
- order: 11
由父元素控制自身数据展示。
---
````jsx
var Table = antd.Table;
var columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
}
}, {
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 <div>
<Table columns={columns} dataSource={this.state.data} />
<button className="ant-btn" onClick={this.handleClick1}>加载本地数据1</button>
&nbsp;
<button className="ant-btn" onClick={this.handleClick2}>加载本地数据2</button>
</div>;
}
})
React.render(<App />
, document.getElementById('components-table-demo-local-data'));
````

View File

@ -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);