提交 7ba8e08b 编写于 作者: dqaria's avatar dqaria

加入Table 远程模式支持由外界发起请求方法

上级 902ca1dc
# 外界触发表格刷新
- order: 8
查询页面大量使用表格,当删除某条目后需要刷新。可直接传入DataSource实例,然后调用其fetch方法刷新表格。
**注意,请打开console调试fetch方法**
---
````jsx
var Table = antd.Table;
var DataSource = Table.DataSource;
var columns = [{
title: '姓名',
dataIndex: 'name',
filters: [{
text: '姓李的',
value: ''
}, {
text: '姓胡的',
value: ''
}]
}, {
title: '年龄',
dataIndex: 'age',
sorter: true
}, {
title: '住址',
dataIndex: 'address'
}];
function resolve(result) {
return result.data;
}
var dataSource = new DataSource({
url: "/components/table/demo/data.json",
resolve: function(result) {
return result.data;
},
// 和后台接口返回的分页数据进行适配
getPagination: function(result) {
return {
total: result.totalCount,
pageSize: result.pageSize
}
},
// 和后台接口接收的参数进行适配
// 参数里提供了分页、筛选、排序的信息
getParams: function(pagination, filters, sorter) {
console.log('getParams 的参数是:', pagination, filters, sorter);
var params = {
pageSize: pagination.pageSize,
currentPage: pagination.current,
sortField: sorter.field,
sortOrder: sorter.order
};
for (let key in filters) {
params[key] = filters[key];
}
console.log('请求参数:', params);
return params;
}
});
// 可供外部调用fetch接口刷新表格
dataSource.fetch();
// 请打开console调试fetch方法
window.dataSource = dataSource;
React.render(<Table columns={columns} dataSource={dataSource} />
, document.getElementById('components-table-demo-advance-ajax'));
````
# 不显示分页
- order: 8
- order: 9
传入 pagination 为 false 即可。
......
......@@ -15,7 +15,17 @@ function defaultResolve(data) {
return data || [];
}
export default React.createClass({
class DataSource {
constructor(config) {
this.url = config.url || "";
this.resolve = config.resolve || defaultResolve;
this.getParams = config.getParams || noop;
this.getPagination = config.getPagination || noop;
this.fetch = noop;
}
}
var AntTable = React.createClass({
getInitialState() {
return {
// 减少状态
......@@ -75,11 +85,19 @@ export default React.createClass({
},
getRemoteDataSource() {
return objectAssign({
resolve: defaultResolve,
getParams: noop,
getPagination: noop
}, this.props.dataSource);
// 判断传入DataSource类型
var dataSource = this.props.dataSource;
if ( dataSource.constructor === DataSource ) {
// 当传入 dataSource Instance 时,对外部DataSource暴露fetch接口
dataSource.fetch = this.fetch;
return dataSource;
} else {
return objectAssign({
resolve: defaultResolve,
getParams: noop,
getPagination: noop
}, this.props.dataSource);
}
},
toggleSortOrder(order, column) {
......@@ -450,3 +468,7 @@ export default React.createClass({
</div>;
}
});
AntTable.DataSource = DataSource;
export default AntTable;
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册