2015-07-09 20:29:26 +08:00
|
|
|
# 动态加载数据
|
|
|
|
|
2015-07-14 15:35:17 +08:00
|
|
|
- order: 7
|
2015-07-09 20:29:26 +08:00
|
|
|
|
2015-07-14 18:29:43 +08:00
|
|
|
远程读取的表格是**更为常见的模式**,下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配,并具有筛选、排序等功能以及页面 loading 效果。
|
2015-07-09 20:29:26 +08:00
|
|
|
|
2015-07-16 18:26:17 +08:00
|
|
|
**注意,此示例是静态数据模拟,数据并不准确,请打开网络面板查看请求。**
|
2015-07-14 20:04:14 +08:00
|
|
|
|
2015-07-09 20:29:26 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
````jsx
|
2015-07-12 17:10:06 +08:00
|
|
|
var Table = antd.Table;
|
2015-08-05 10:58:21 +08:00
|
|
|
|
2015-07-12 17:10:06 +08:00
|
|
|
var columns = [{
|
|
|
|
title: '姓名',
|
2015-07-14 18:29:43 +08:00
|
|
|
dataIndex: 'name',
|
|
|
|
filters: [{
|
|
|
|
text: '姓李的',
|
|
|
|
value: '李'
|
|
|
|
}, {
|
|
|
|
text: '姓胡的',
|
|
|
|
value: '胡'
|
|
|
|
}]
|
2015-07-12 17:10:06 +08:00
|
|
|
}, {
|
|
|
|
title: '年龄',
|
2015-07-14 18:29:43 +08:00
|
|
|
dataIndex: 'age',
|
|
|
|
sorter: true
|
2015-07-12 17:10:06 +08:00
|
|
|
}, {
|
|
|
|
title: '住址',
|
|
|
|
dataIndex: 'address'
|
|
|
|
}];
|
|
|
|
|
2015-08-05 10:58:21 +08:00
|
|
|
var dataSource = new Table.DataSource({
|
2015-07-14 15:35:17 +08:00
|
|
|
url: "/components/table/demo/data.json",
|
|
|
|
resolve: function(result) {
|
|
|
|
return result.data;
|
2015-07-14 17:58:00 +08:00
|
|
|
},
|
2015-08-26 14:08:46 +08:00
|
|
|
data: {},
|
2015-07-14 17:58:00 +08:00
|
|
|
// 和后台接口返回的分页数据进行适配
|
|
|
|
getPagination: function(result) {
|
|
|
|
return {
|
|
|
|
total: result.totalCount,
|
|
|
|
pageSize: result.pageSize
|
|
|
|
}
|
2015-07-14 18:29:43 +08:00
|
|
|
},
|
2015-07-14 20:04:14 +08:00
|
|
|
// 和后台接口接收的参数进行适配
|
|
|
|
// 参数里提供了分页、筛选、排序的信息
|
2015-07-15 14:10:01 +08:00
|
|
|
getParams: function(pagination, filters, sorter) {
|
2015-07-28 15:20:15 +08:00
|
|
|
console.log('getParams 的参数是:', pagination, filters, sorter);
|
2015-07-14 20:04:14 +08:00
|
|
|
var params = {
|
|
|
|
pageSize: pagination.pageSize,
|
|
|
|
currentPage: pagination.current,
|
2015-07-15 14:10:01 +08:00
|
|
|
sortField: sorter.field,
|
|
|
|
sortOrder: sorter.order
|
2015-07-14 20:04:14 +08:00
|
|
|
};
|
2015-08-07 01:03:42 +08:00
|
|
|
for (var key in filters) {
|
2015-07-14 20:04:14 +08:00
|
|
|
params[key] = filters[key];
|
|
|
|
}
|
2015-07-15 14:10:01 +08:00
|
|
|
console.log('请求参数:', params);
|
2015-07-14 18:29:43 +08:00
|
|
|
return params;
|
2015-07-14 15:35:17 +08:00
|
|
|
}
|
2015-08-05 10:58:21 +08:00
|
|
|
});
|
|
|
|
|
2015-08-11 16:57:17 +08:00
|
|
|
var Test = React.createClass({
|
2015-08-07 10:58:15 +08:00
|
|
|
getInitialState() {
|
2015-08-07 01:03:42 +08:00
|
|
|
return {
|
2015-08-07 10:58:15 +08:00
|
|
|
dataSource: dataSource
|
2015-08-07 01:03:42 +08:00
|
|
|
};
|
|
|
|
},
|
2015-08-07 10:58:15 +08:00
|
|
|
refresh() {
|
2015-08-07 01:03:42 +08:00
|
|
|
this.setState({
|
2015-08-11 16:57:17 +08:00
|
|
|
dataSource: dataSource.clone()
|
|
|
|
});
|
|
|
|
},
|
|
|
|
changeAndRefresh() {
|
|
|
|
// 可以修改原来的 dataSource 再发请求
|
|
|
|
this.setState({
|
|
|
|
dataSource: dataSource.clone({
|
|
|
|
data: {
|
|
|
|
city: 'hz'
|
|
|
|
}
|
|
|
|
})
|
2015-08-07 01:03:42 +08:00
|
|
|
});
|
|
|
|
},
|
2015-08-07 10:58:15 +08:00
|
|
|
render() {
|
2015-08-07 01:03:42 +08:00
|
|
|
return <div>
|
2015-08-07 10:58:15 +08:00
|
|
|
<Table columns={columns} dataSource={this.state.dataSource} />
|
|
|
|
<button className="ant-btn ant-btn-primary" onClick={this.refresh}>
|
2015-08-11 16:57:17 +08:00
|
|
|
重新加载数据
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button className="ant-btn" onClick={this.changeAndRefresh}>
|
|
|
|
加载 city=hz 的数据
|
2015-08-07 10:58:15 +08:00
|
|
|
</button>
|
|
|
|
</div>;
|
2015-08-07 01:03:42 +08:00
|
|
|
}
|
|
|
|
});
|
2015-07-14 15:35:17 +08:00
|
|
|
|
2015-08-07 01:03:42 +08:00
|
|
|
React.render(<Test />, document.getElementById('components-table-demo-ajax'));
|
2015-07-09 20:29:26 +08:00
|
|
|
````
|