ant design pro テーブルソート(3回クリック可能)

1. まず、column属性に追加します。

sorter: true
{
      title: 'flowmeterCode',
      dataIndex: 'flowmeterCode',
      hideInForm: true,
      ellipsis: true,
      sorter: true
    }

3つのタップでもう1つのテーブルチェンジが必要です。

tableChangeは、以下のようにテーブルのソートが変更されたときに、テーブルを再読み込みします。

  const tableChange = (pagination: any, filters: any, sorter: any) => {
    if (sorter.order === undefined) {
      setSorterOrder(undefined)
      actionRef.current?.reload()
    }
    else {
      setSorterOrder(sorter)
    }
  }

リクエストは以下の通りです。

判定を追加する

if (params.sorter ! = undefined && sorterOrder ! = undefined) {
      params["sorter"] = JSON.stringify(params.sorter)
    }
    else {
      params["sorter"] = "{}";
    }

<イグ

2. バックエンド処理

フロントエンドから渡された、ソートが必要なパラメータを取得する必要があります。ここでは、一般的なツールのメソッドを紹介します。

 * Table sorting
 *
 * @param tableMap
 * @param sorterBy Default sort by this property
 * @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));

<イグ