react + antd 表格排序（服务端返回数据）

本地表格排序只需要按照文档描述在Column中加入属性sorter，写入排序方法即可。本地表格排序只能在当前页对显示的数据进行排序，如果想对所有的数据进行排序，需要使用后端返回的数据，这时候属性sorter就不能写入排序方法了，根据文档描述，要改成true。

// 本地排序
const columns = [{title: 'Name',dataIndex: 'name',sorter: (a, b) => a.name.length - b.name.length,},{title: 'Age',dataIndex: 'age',sorter: (a, b) => a.age - b.age,},{title: 'Address',dataIndex: 'address',sorter: (a, b) => a.address.length - b.address.length,}
];

// 服务端排序
const tableColumns = [{title: '日期',dataIndex: 'date',  },{title: '时间',dataIndex: 'hour',},{title: '成本',dataIndex: 'cost',sorter: true,},{title: '总价',dataIndex: 'total',sorter: true,}
]

sorter设置为true后表格会显示排序的上下箭头，但是此时的上下箭头只有样式而没有真实数据

这时我们需要了解一下表格的onChange方法：

表格的onChange方法会在表格的分页、排序、筛选变化时触发，并且返回pagination, filters, sorter, extra: { currentDataSource: [] }，在排序这个需求中我们需要用到的就是sorter参数。

// sorter包含的属性
{column: {title: '成本', dataIndex: 'cost', sorter: true},columnKey: undefined,field: "realCost",order: "ascend",
}

在sorter参数中我们需要用到order属性，是否需要field属性需要根据与服务端的约定来判断

如果排序的传参方式是增加两个参数，一个传列名，一个传当前排序顺序是需要field属性的（本人更推荐这种方式）

// 表格排序const tableOnChange = (pag, filters, sorter) => {console.log('page:', pag, filters, sorter);const newParams = {...searchParams,sortType: sorter.order,dataIndex: sorter.field,};newList(newParams); // 请求表格数据的方法};

<TablerowKey="id"loading={loading}columns={tableColumns}dataSource={dataSource}onChange={tableOnChange}
/>

另一种方式是只传一个参数，正数为正序，负数为倒序，不同的列数字不同，但是需要增加一组数据来记录列数字，并且需要循环判断。

// 表格排序const tableOnChange = (pag, filters, sorter) => {console.log('page:', pag, filters, sorter);let sortType = '';arryList.map((item) => {if (item.key === sorter.field) {if (sorter.order === 'ascend') {//未点击过，上下箭头不展示，先正向排序sortType = +item.sortType + '';} else if (sorter.order === 'descend') {//当前排序正向sortType = -item.sortType + '';} else {//当前排序倒向sortType = '';}}});const newParams = {...searchParams,sortType,};queryList(newParams); // 表格请求数据方法};

// 另存的排序数据
const arryList = [{ key: 'cost', sortType: 1 },{ key: 'real', sortType: 2 }
]

（以上内容为本人在开发中的记录，如有错误欢迎指正~）

react + antd 表格排序（服务端返回数据）相关推荐

java post返回xml数据类型_Java 通过HttpURLConnection Post方式提交xml，并从服务端返回数据...
这里面简单介绍下,HttpURLConnection连接服务器,并返回数据客户端代码Java代码: import java.io.InputStream; import java.io.Output ...
react 使用express实现简单的分页接口，以及服务端返回public文件夹里的图片方法
前言本文基于 react ("react": "^16.13.1") , express("express": "~4.16.1 ...
js插件---WebUploader 如何接收服务端返回的数据
js插件---WebUploader 如何接收服务端返回的数据一.总结一句话总结: uploadSuccess有两个参数,一个是file(上传的文件信息),一个是response(服务器返回的信息 ...
ajax从服务端获取数据(服务端返回html、xml)
ajax的本质就是,发送http请求的工作交给js中的XMLHttpRequest对象去做! <!DOCTYPE html> <html> <head> <m ...
ionic3使用@angular/http 访问nodejs（koa2框架）服务不能返回数据
cordova的http插件不能使用在browser上,所以当需要在browser上浏览时,需要使用@angular/http 里的方法来访问nodejs服务. 如果出现服务端能够接收请求并相应,而客 ...
ajax 获取java数据_如何使用Ajax从服务端获取数据
在本文中将给出一个例子来介绍使用 Ajax 技术从服务端获得数据的三种方法.这个例子很简单,就是两个选择框(html中的标签),通过选中第一个select的某一项后,会从服务端得到一些数据,并加载到第 ...
java Socket Tcp示例三则（服务端处理数据、上传文件）
示例一: package cn.itcast.net.p5.tcptest; import java.io.BufferedReader; import java.io.IOException; im ...
js与C#服务端 json数据交互
1.1 服务端返回给前端返回的数据都放入对象中(根据需求:单个对象,集合,键值对),然后JSON序列化返回给前端.这里可以引用JSON.NET 库,也可以用.NET自带的类库: JavaScript ...
Android 客户端与服务端的数据交互问题
Android客户端是如何与服务端的数据进行交互的呢? 一般就是客户端向服务端发送请求,服务端对数据进行相关处理,返回json数据返回给客户端,客户端再进行相关操作. 说明:主要是用登录功能来进行详解 ...

react + antd 表格排序（服务端返回数据）

react + antd 表格排序（服务端返回数据）相关推荐

最新文章

热门文章