reactjs 使用表格排序器时如何将特殊字符串放到底部

jexiocij 于 2023-11-18 发布在 React

关注(0)|答案(2)|浏览(119)

我希望特殊字符串'--'总是在底部，无论方向是上升还是下降。
我期望的排序结果是：

升序：['1.1', '1.2', '1.3', '--', '--']
规格：['1.3', '1.2', '1.1', '--', '--']

import "antd/dist/antd.css";
import { Table } from "antd";

function sorter(sortOrder) {
    return function (a, b) {
        // equal items sort equally
        if (a === b) {
            return 0;
        }

        // nulls sort after anything else
        if (a === "--") {
            return 1;
        }
        if (b === "--") {
            return -1;
        }

        // otherwise, if we're ascending, lowest sorts first
        if (sortOrder === "ascend") {
            return a < b ? -1 : 1;
        }

        // if descending, highest sorts first
        return a < b ? 1 : -1;
    };
}

export default function App() {
    return (
        <Table
            columns={[
                {
                    dataIndex: "value",
                    title: "value",
                    sorter: (aRecord, bRecord, sortOrder) => sorter(sortOrder)(aRecord.value, bRecord.value),
                },
            ]}
            dataSource={[{ value: "1.1" }, { value: "--" }, { value: "1.3" }, { value: "1.2" }, { value: "--" }]}
        />
    );
}

字符串
我试过这个solution，但它不工作。

的数据
codesandbox的

reactjs

来源：https://stackoverflow.com/questions/77478926/how-to-put-the-special-string-to-the-bottom-when-using-table-sorter

2条答案

按热度按时间

cngwdvgl1#

sortOrder值应在与"--"进行比较的两个位置使用：

import "antd/dist/antd.css";
import { Table } from "antd";
import { SortOrder } from "antd/lib/table";

function sorter(a: any, b: any, sortOrder: SortOrder | undefined) {
    // equal items sort equally
    if (a === b) {
        return 0;
    }

    // "--" sorts after anything else, so return value depends on sortOrder:
    if (a === "--") {
        return sortOrder === "descend" ? -1 : 1; // <-- HERE (1)
    }
    if (b === "--") {
        return sortOrder === "descend" ? 1: -1; // <-- HERE (2)
    }

    return +a - +b;
};

export default function App() {
    return (
        <Table
            columns={[
                {
                    dataIndex: "value",
                    title: "value",
                    sorter: (aRecord, bRecord, sortOrder) => sorter(aRecord.value, bRecord.value, sortOrder),
                },
            ]}
            dataSource={[{ value: "1.1" }, { value: "--" }, { value: "1.3" }, { value: "1.2" }, { value: "--" }]}
        />
    );
}

字符串
CodeSandbox：https://codesandbox.io/s/antd-table-sorter-forked-yj8hmv?file=/src/App.tsx

赞(0）回复(0）举报 2023-11-18

ryoqjall2#

试试这段代码来获得特殊的字符串'--'总是在底部，可能会对你有帮助

import React from "react";
import "antd/dist/antd.css";
import { Table } from "antd";

function sorter(sortOrder) {
  return function (a, b) {
    if (a === "--") {
      return sortOrder === "ascend" ? 1 : -1;
    }
    if (b === "--") {
      return sortOrder === "ascend" ? -1 : 1;
    }
    if (a === b) {
      return 0;
    }

    return sortOrder === "ascend" ? (a < b ? -1 : 1) : a < b ? 1 : -1;
  };
}

export default function App() {
  const dataSource = [
    { value: "1.1" },
    { value: "--" },
    { value: "1.3" },
    { value: "1.2" },
    { value: "--" },
  ];

  return (
    <Table
      columns={[
        {
          dataIndex: "value",
          title: "value",
          sorter: (aRecord, bRecord, sortOrder) =>
            sorter(sortOrder)(aRecord.value, bRecord.value),
        },
      ]}
      dataSource={dataSource}
    />
  );
}

字符串

赞(0）回复(0）举报 2023-11-18

我来回答

reactjs 使用表格排序器时如何将特殊字符串放到底部

2条答案

相关问题

热门标签

最新问答