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

Question

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

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

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

如何防止双重排序？

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

您可以在示例中看到，我将数据显示在表格下方。我的目标是无论我点击表格标题设置的顺序如何，它在表格中的顺序都相同。

Answer 1

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

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

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

Answer 2

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

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

参考：Implementing the Server-side Datasource

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

当您对列进行排序时，请注意您通过 params.request.sortModel 在 dataSource.getRows 方法中获取详细信息。

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