antd table如何实现column列前后端排序

文章目录展开

一、前端排序
二、后端排序

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列进行前后端排序的方法，如有问题，欢迎留言！