mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 21:19:37 +08:00
update ajax table demo
This commit is contained in:
parent
4d2119c358
commit
a6661386c4
@ -4,6 +4,8 @@
|
||||
|
||||
远程读取的表格是**更为常见的模式**,下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配,并具有筛选、排序等功能以及页面 loading 效果。
|
||||
|
||||
此示例是静态数据模拟,数据可能不准确,请打开网络面板查看请求。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
@ -43,9 +45,19 @@ var dataSource = {
|
||||
pageSize: result.pageSize
|
||||
}
|
||||
},
|
||||
// 和后台接口接收的参数进行适配
|
||||
// 参数里提供了分页、筛选、排序的信息
|
||||
getParams: function(pagination, filters, sorters) {
|
||||
let params = {};
|
||||
console.log(pagination, filters, sorters);
|
||||
var params = {
|
||||
pageSize: pagination.pageSize,
|
||||
currentPage: pagination.current,
|
||||
sort: sorters
|
||||
};
|
||||
for (let key in filters) {
|
||||
params[key] = filters[key];
|
||||
}
|
||||
console.log(params);
|
||||
return params;
|
||||
}
|
||||
};
|
||||
|
@ -6,6 +6,7 @@ import Table from 'rc-table';
|
||||
import Menu from 'rc-menu';
|
||||
import Dropdown from '../dropdown';
|
||||
import Pagination from '../pagination';
|
||||
import objectAssign from 'object-assign';
|
||||
|
||||
let AntTable = React.createClass({
|
||||
getInitialState() {
|
||||
@ -16,26 +17,22 @@ let AntTable = React.createClass({
|
||||
this.originDataSource = this.props.dataSource.slice(0);
|
||||
} else {
|
||||
this.mode = 'remote';
|
||||
this.props.dataSource.resolve =
|
||||
this.props.dataSource.resolve || function(data) {
|
||||
this.props.dataSource = objectAssign({
|
||||
resolve: function(data) {
|
||||
return data || [];
|
||||
};
|
||||
this.props.dataSource.getParams =
|
||||
this.props.dataSource.getParams || function() {
|
||||
return {};
|
||||
};
|
||||
this.props.dataSource.getPagination =
|
||||
this.props.dataSource.getPagination || function() {
|
||||
return {};
|
||||
};
|
||||
},
|
||||
getParams: function() {},
|
||||
getPagination: function() {}
|
||||
}, this.props.dataSource);
|
||||
}
|
||||
var pagination;
|
||||
if (this.props.pagination === false) {
|
||||
pagination = false;
|
||||
} else {
|
||||
pagination = this.props.pagination || {};
|
||||
pagination.pageSize = pagination.pageSize || 10;
|
||||
pagination.total = this.props.dataSource.length || 10;
|
||||
pagination = objectAssign({
|
||||
pageSize: 10,
|
||||
total: this.props.dataSource.length
|
||||
}, this.props.pagination);
|
||||
}
|
||||
return {
|
||||
selectedRowKeys: [],
|
||||
@ -229,6 +226,7 @@ let AntTable = React.createClass({
|
||||
}
|
||||
return <Pagination className="ant-table-pagination"
|
||||
onChange={this.handlePageChange}
|
||||
size="simple"
|
||||
{...this.state.pagination} />;
|
||||
},
|
||||
prepareParamsArguments() {
|
||||
@ -257,10 +255,12 @@ let AntTable = React.createClass({
|
||||
});
|
||||
jQuery.ajax({
|
||||
url: dataSource.url,
|
||||
params: dataSource.getParams.apply(this, this.prepareParamsArguments()),
|
||||
data: dataSource.getParams.apply(this, this.prepareParamsArguments()) || {},
|
||||
headers: dataSource.headers,
|
||||
dataType: 'json',
|
||||
success: (result) => {
|
||||
if (this.isMounted()) {
|
||||
let pagination = jQuery.extend(
|
||||
let pagination = objectAssign(
|
||||
this.state.pagination,
|
||||
dataSource.getPagination.call(this, result)
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user