1、首先在column属性中添加sorter: true
{
title: '流量计编码',
dataIndex: 'flowmeterCode',
hideInForm: true,
ellipsis: true,
sorter: true
}
点三次需要再加一个tablechange:
tableChange如下,当表格排序有变化是重新加载表格:
const tableChange = (pagination: any, filters: any, sorter: any) => {
if (sorter.order === undefined) {
setSorterOrder(undefined)
actionRef.current?.reload()
}
else {
setSorterOrder(sorter)
}
}
request如下:
加一个判断
if (params.sorter != undefined && sorterOrder != undefined) {
params["sorter"] = JSON.stringify(params.sorter)
}
else {
params["sorter"] = "{}";
}
2、后端处理
需要拿到前端传过来需要排序的参数,以下是通用工具方法:
* 表格排序
*
* @param tableMap
* @param sorterBy 默认按此属性排序
* @return
*/
public static Sort sortAttr(Map<String, String> tableMap, String sorterBy) {
Sort sort;
if (tableMap.get(Constants.SORTER) != null && !Constants.EMPTY_SORTER.equals(tableMap.get(Constants.SORTER))) {
JSONObject sorter = JSONObject.parseObject(tableMap.get(Constants.SORTER));
Iterator<String> iterator = sorter.keySet().iterator();
String sortAttr = iterator.next();
if (Constants.ASCEND.equals(sorter.get(sortAttr))) {
sort = new Sort(Sort.Direction.ASC, sortAttr);
} else {
sort = new Sort(Sort.Direction.DESC, sortAttr);
}
} else {
sort = new Sort(Sort.Direction.DESC, sorterBy);
}
return sort;
}
使用Pageable排序:
Pageable pageable = PageRequest.of(current - 1, pageSize, Utils.sortAttr(tableMap,Constants.GMT_MODIFIED));