mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 05:29:37 +08:00
Merge branch '0.8.0' of github.com:ant-design/ant-design into 0.8.0
This commit is contained in:
commit
3c95c727b3
76
components/table/demo/advance-ajax.md
Normal file
76
components/table/demo/advance-ajax.md
Normal file
@ -0,0 +1,76 @@
|
||||
# 外界触发表格刷新
|
||||
|
||||
- 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'));
|
||||
````
|
@ -1,6 +1,6 @@
|
||||
# 不显示分页
|
||||
|
||||
- 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;
|
||||
|
Loading…
Reference in New Issue
Block a user