mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 08:09:13 +08:00
72a7ba618f
* chore: update rc-table * add basic table style * checked all logic * checkbox support disabled * selection style * selection support radio * add selections support * selection extra style * select all locale * sorter logic * add more desc * init Filter hooks * init filter hooks * update style * filter style * filter style * fix filter * sort control * ajax it * add expandedable css * expandable view style * fixed style * border style * empty style * fix pagination style * add fixed demo * un-comment * clean up * fix filter check logic * fix overflow & ellipsis conflict * fix tes * adjust scroll shadow * fix border fixed style * add part of test case * add filter test part * more test case * issue related test * filter test * adjust pagination logic * fix pagination test case * all selection test case * table sorter test case * table basic test * fix test case * update faq * update expandable doc * add v4 doc * add summary docs * more demo * fix selection * update snapshot * update test case * fix ff styling * update rc-table * update snapshot * update snapshot * fix lint * fix style lint * fix style * update snapshot * update desc * fix missing icon
2.7 KiB
2.7 KiB
order | title | ||||
---|---|---|---|---|---|
10 |
|
zh-CN
这个例子通过简单的 ajax 读取方式,演示了如何从服务端读取并展现数据,具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。
另外,本例也展示了筛选排序功能如何交给服务端实现,列不需要指定具体的 onFilter
和 sorter
函数,而是在把筛选和排序的参数发到服务端来处理。
注意,此示例使用 模拟接口,展示数据可能不准确,请打开网络面板查看请求。
en-US
This example shows how to fetch and present data from a remote server, and how to implement filtering and sorting in server side by sending related parameters to server.
Note, this example use Mock API that you can look up in Network Console.
import { Table } from 'antd';
import reqwest from 'reqwest';
const columns = [
{
title: 'Name',
dataIndex: 'name',
sorter: true,
render: name => `${name.first} ${name.last}`,
width: '20%',
},
{
title: 'Gender',
dataIndex: 'gender',
filters: [{ text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }],
width: '20%',
},
{
title: 'Email',
dataIndex: 'email',
},
];
class App extends React.Component {
state = {
data: [],
pagination: {},
loading: false,
};
componentDidMount() {
this.fetch();
}
handleTableChange = (pagination, filters, sorter) => {
const pager = { ...this.state.pagination };
pager.current = pagination.current;
this.setState({
pagination: pager,
});
this.fetch({
results: pagination.pageSize,
page: pagination.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
};
fetch = (params = {}) => {
console.log('params:', params);
this.setState({ loading: true });
reqwest({
url: 'https://randomuser.me/api',
method: 'get',
data: {
results: 10,
...params,
},
type: 'json',
}).then(data => {
const pagination = { ...this.state.pagination };
// Read total count from server
// pagination.total = data.totalCount;
pagination.total = 200;
this.setState({
loading: false,
data: data.results,
pagination,
});
});
};
render() {
return (
<Table
columns={columns}
rowKey={record => record.login.uuid}
dataSource={this.state.data}
pagination={this.state.pagination}
loading={this.state.loading}
onChange={this.handleTableChange}
/>
);
}
}
ReactDOM.render(<App />, mountNode);