使用antd的table实现多列排序

2020-04-09  本文已影响0人  子涵_520

在antd3.0的时候,Table标签的排序只支持单列排序,需求是要多列排序,并且是传参到后台让后台来排序,于是在表头做了点改动,就可以实现多列排序

let = columns =[
  title:generateTitle(title,dataIndex,sortArr,sortColumns,()=>this.sortChange(dataIndex)),
 dataIndex:"custNo"
]

每一列的表头都按照如上图所示的代码编写;
title:一列表头的名称
dataIndex:就是对应dataIndex的值
sortArr:每一列排序记录先后顺序(客户名称先排列,客户名称就是1,产品代码第二个排列,产品代码就是2)
sortColumns:为了记录当前是升序/降序/不排列的图标,

this.state={
sortColumns:[
  {
  columnKey:"custNo",
  order:""//记录升序/降序
  }
]
}

最后一个方法是点击表头的时候,触发的一个方法,


Inked7208441-19f278791c036fa1_LI.jpg

根据调用sortTable返回哪些表头需要排序,调用后台服务进行排序
sortTable方法执行的代码如下:

image.png
这个方法主要是更新sortColumns中对应的order的值,从而页面的图标会改变(向上箭头/向下箭头/没有箭头)
更新sortParamter(["custName asc","age desc"]),主要是把这个参数传到后台,让后台根据前端传递的相应参数,对表头做排序返回给页面
antd4.0新增了多列排序,
image.png
应该也可以配合让后台排序,详细可以去官网看看
https://ant.design/components/table-cn/#components-table-demo-multiple-sorter
上一篇 下一篇

猜你喜欢

热点阅读