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

Web前端 潘老师 4周前 (08-19) 130 ℃ (0) 扫码查看

antd table组件的功能非常强大,可以实现根据column列进行前端和后端排序、筛选等功能,下面潘老师给大家介绍下antd table如何实现前端排序和服务端排序的问题。

一、前端排序

antd table前端排序其实非常简单,我们先看下column列官方API说明:
antd table如何实现column列前后端排序
所以想要实现前端排序,只要在定义column列时,设置sorter属性,再带个回调函数即可,类似如下:

const columns = [
    {
        title: 'Age',
        dataIndex: 'age',
        // 默认降序
        defaultSortOrder: 'descend',
        // 回调函数,返回值boolean类型
        sorter: (a, b) => a.age - b.age,
      }
]

如此就可以实现如图针对Age列的排序效果:
antd table如何实现column列前后端排序
更具体的可以参考官网示例:
筛选和排序

二、后端排序

前端排序往往不能满足我们开发的需求,因为一般我们前端都是分页显示的,前端排序只能针对当前页排序,无法全局排序,因此后端排序时很有必要的,相比前端排序而言,后端排序更复杂些,我们第一张图中也看到,sorter是支持后端排序的,只要设置为true即可,那没了回调函数,该如何告知后端根据哪个列进行何种形式的排序呢?这就要我们看下tableapi了:
antd table如何实现column列前后端排序
那怎么用呢?大致的案例代码如下:

// 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列前后端排序
更加具体的案例代码可以参考官网:
远程加载数据
以上就是antd table如何实现根据column列进行前后端排序的方法,如有问题,欢迎留言!


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:antd table如何实现column列前后端排序
喜欢 (1)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!