mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 03:29:59 +08:00
allow dataSourse controlled by parent in local mode
This commit is contained in:
parent
c799326e7f
commit
6d2dcc4539
82
components/table/demo/local-data.md
Normal file
82
components/table/demo/local-data.md
Normal 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>
|
||||
|
||||
<button className="ant-btn" onClick={this.handleClick2}>加载本地数据2</button>
|
||||
</div>;
|
||||
}
|
||||
})
|
||||
|
||||
React.render(<App />
|
||||
, document.getElementById('components-table-demo-local-data'));
|
||||
````
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user