Merge branch '0.8.0' of github.com:ant-design/ant-design into 0.8.0

This commit is contained in:
afc163 2015-08-05 10:21:35 +08:00
commit 3c95c727b3
3 changed files with 105 additions and 7 deletions

View 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'));
````

View File

@ -1,6 +1,6 @@
# 不显示分页
- order: 8
- order: 9
传入 pagination 为 false 即可。

View File

@ -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 DataSourcefetch
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;