Отключить сортировку по алфавиту в ag-grid, используя модель basi c

Question

Я использую сортировку на стороне сервера с ag-grid. До сих пор я использовал для свойства enableServerSideSorting значение true. Но после обновления версии это свойство недоступно.

Я использую событие onSortChanged для захвата состояния сортировки сетки. И я хочу обработать эту сортировку на стороне сервера. Таким образом, 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

В примере видно, что я отображаю данные под таблицей. Моя цель состоит в том, чтобы у нее был одинаковый порядок в таблице, независимо от того, какой порядок я установил, щелкая заголовок таблицы.

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.

Вы можете использовать его для предоставления информации сортировки на сервер.

Ссылка: Реализация источника данных на стороне сервера

Взгляните на этот план: https://plnkr.co/edit/z8KzsZ8sAcCe9tYWJedS?p=preview.

При сортировке по столбцу обратите внимание, что вы получаете детали params.request.sortModel внутри dataSource.getRows метода.

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