update ajax table demo

This commit is contained in:
afc163 2015-07-14 20:04:14 +08:00
parent 4d2119c358
commit a6661386c4
2 changed files with 29 additions and 17 deletions

View File

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

View File

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