antd table
组件的功能非常强大,可以实现根据column列进行前端和后端排序、筛选等功能,下面潘老师给大家介绍下antd table
如何实现前端排序和服务端排序的问题。
一、前端排序
antd table
前端排序其实非常简单,我们先看下column
列官方API说明:
所以想要实现前端排序,只要在定义column列时,设置sorter
属性,再带个回调函数即可,类似如下:
const columns = [ { title: 'Age', dataIndex: 'age', // 默认降序 defaultSortOrder: 'descend', // 回调函数,返回值boolean类型 sorter: (a, b) => a.age - b.age, } ]
如此就可以实现如图针对Age
列的排序效果:
更具体的可以参考官网示例:
筛选和排序
二、后端排序
前端排序往往不能满足我们开发的需求,因为一般我们前端都是分页显示的,前端排序只能针对当前页排序,无法全局排序,因此后端排序时很有必要的,相比前端排序而言,后端排序更复杂些,我们第一张图中也看到,sorter
是支持后端排序的,只要设置为true
即可,那没了回调函数,该如何告知后端根据哪个列进行何种形式的排序呢?这就要我们看下table
的api
了:
那怎么用呢?大致的案例代码如下:
// table列 const columns = [ { title: 'Name', dataIndex: 'name', // 核心1:sorter设置为true sorter: true, render: name => `${name.first} ${name.last}`, width: '20%', } ] // 模板 render() { const { data, pagination, loading } = this.state; return ( <Table columns={columns} rowKey={record => record.login.uuid} dataSource={data} pagination={pagination} loading={loading} // 核心2:在table上绑定onChange事件 onChange={this.handleTableChange} /> ); } //核心3: 实现 onchange事件调用后台接口 handleTableChange = (pagination, filters, sorter) => { // fetch方法就是你请求后台数据的api,在此就不详细展示了 this.fetch({ // 核心4: 排序相关的两个字段 列和排序类型 sortField: sorter.field, sortOrder: sorter.order, pagination, // 筛选的,可以不用管 ...filters, }); };
如此点击排序按钮,就可以触发onChange
方法将参数和排序字段以及排序方法传给api接口,然后返回排序好的数据,从而实现后端排序
更加具体的案例代码可以参考官网:
远程加载数据
以上就是antd table如何实现根据column列进行前后端排序的方法,如有问题,欢迎留言!