ant-design/components/table/demo/ajax.md

101 lines
2.3 KiB
Markdown
Raw Normal View History

2015-07-09 20:29:26 +08:00
# 动态加载数据
- order: 7
2015-07-09 20:29:26 +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-07-12 17:10:06 +08:00
var columns = [{
title: '姓名',
dataIndex: 'name',
filters: [{
text: '姓李的',
value: '李'
}, {
text: '姓胡的',
value: '胡'
}]
2015-07-12 17:10:06 +08:00
}, {
title: '年龄',
dataIndex: 'age',
sorter: true
2015-07-12 17:10:06 +08:00
}, {
title: '住址',
dataIndex: 'address'
}];
var dataSource = new Table.DataSource({
url: "/components/table/demo/data.json",
resolve: function(result) {
return result.data;
2015-07-14 17:58:00 +08:00
},
data: {},
2015-07-14 17:58:00 +08:00
// 和后台接口返回的分页数据进行适配
getPagination: function(result) {
return {
total: result.totalCount,
pageSize: result.pageSize
}
},
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);
return params;
}
});
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({
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}>
重新加载数据
</button>
&nbsp;
<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-08-07 01:03:42 +08:00
React.render(<Test />, document.getElementById('components-table-demo-ajax'));
2015-07-09 20:29:26 +08:00
````