使用基本模型禁用 ag-grid 中的字母排序

Question

我使用 ag-grid 的服务器端排序。到目前为止，我将 enableServerSideSorting 属性设置为 true。但是版本升级后这个属性不可用了。

我使用 onSortChanged 事件来捕获网格的排序状态。我想在服务器端处理这种排序。所以 ag-grid 只显示来自服务器的原始顺序的数据。现在我对网格外的数据进行排序，然后 ag-grid 再次按字母顺序排序。

我为此创建了一个示例。有两个组件属性 setSortParams，我在其中设置排序和数据，我在其中获取已排序的数据。

如何防止重复排序？

const ExternalGrid = ({ data, setSortParams }) => {
  const gridOptions = {
    columnDefs: [
      {
        headerName: "Quantity",
        field: "quantity",
        sortable: true
      }
    ],
    defaultColDef: {
      sortable: true
    }
  };

  const onSortChanged = params => {
    const sortModel = params.api.getSortModel();
    setSortParams([
      sortModel.length > 0,
      sortModel.length > 0 ? sortModel[0].sort === "desc" : false
    ]);
  };

  return (
    <div
      className="ag-theme-balham"
      style={{
        height: "180px",
        width: "300px"
      }}
    >
      <AgGridReact
        gridOptions={gridOptions}
        modules={AllCommunityModules}
        onSortChanged={onSortChanged}
        rowData={data}
      />
    </div>
  );
};

示例：https://codesandbox.io/s/ag-grid-server-side-sorting-chy7j

你可以在例子中看到，我显示了table下的数据。我的目标是它在 table 中具有相同的顺序，无论我点击 table header.

设置的顺序如何

Answer 1

在使用服务器端行模型时，不应直接分配 rowData (rowData={data})。相反，创建 ServerSideDatasource。当您对任何列进行排序时，您将能够获取详细信息作为 getRows 方法的参数。

您可以使用它向服务器提供排序信息。

参考：Implementing the Server-side Datasource

看看这个 plunk：https://plnkr.co/edit/z8KzsZ8sAcCe9tYWJedS?p=preview。

当您对列进行排序时，观察到您通过 dataSource.getRows 方法中的 params.request.sortModel 获取了详细信息。

[{
  colId: "athlete"
  sort: "asc"
}]

Answer 2

如果您在每个列定义中实现以下比较器，则网格在排序时不会修改行顺序：

columnDefs: [
  {
    headerName: "Quantity",
    field: "quantity",
    sortable: true,
    comparator: (valueA, valueB, nodeA, nodeB, isInverted) => 0
  }
],

https://codesandbox.io/s/ag-grid-server-side-sorting-fmmgf

使用基本模型禁用 ag-grid 中的字母排序

Disable alphabetical sorting in ag-grid using the basic model

reactjs

ag-grid

ag-grid-react