Недавно мне пришлось отображать большой объем данных в таблице Ag-grid из RESTful API (более 3000 объектов для рендеринга по строкам, но они были разбиты на страницы, поэтому он может приносить мне 100 элементов за раз). Читая документацию по ag-grid, я обнаружил возможности на стороне сервера, которые позволяют мне выполнять бесконечную прокрутку, доходя до конца таблицы и запрашивая дополнительные данные. Мне понравилась эта идея, потому что в ней есть элементы управления кешем, встроенные события, а в Ag-Grid есть действительно классные инструменты для отображения данных. Но было не совсем понятно, как это реализовать, не передавая все записи сначала клиенту, и я не мог найти пример того, как это сделать, чтобы удовлетворить мою текущую ситуацию.

Вот почему я решил написать эту статью, чтобы показать, как я это сделал.

Все, что у меня было, это API, который уже давал мне часть данных, и я мог выполнять несколько запросов, запрашивая следующую страницу или блокировать через параметр в URL-адресе, и это было нормально, потому что передача всех данных могла быть очень сложной. дорого (даже если бы я использовал сервис, работающий для этого), поэтому мне нужно было только выяснить, как сделать это с помощью Gg-grid и его функции источника данных на стороне сервера.

кстати, я использую в своем приложении следующие версии

  • реакция: 16.5.2
  • ag-grid: 18.1.2
  • ag-grid-community: 19.0.0
  • ag-grid-enterprise: 19.0.0
  • ag-grid-react: 19.0.0

1. Отправная точка

Я начал с этого примера на веб-сайте Ag-Grig, где он объясняет концепции и небольшое приложение для реагирования. Прочтите внимательно.

В этом примере было несколько проблем, которые затрудняли понимание, потому что в нем не объяснялась конфигурация, которая мне нужна в моем API, этот пример переносил все данные с помощью функции FakeServer, которая не была тем, что я хотел, и у меня уже есть API настроен на выведение данных по блокам.

2. То, что вам нужно в вашем API.

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

Эти данные помогут нам оценить, когда перестать запрашивать контент с помощью Ag-grid, или, другими словами, когда мы дойдем до последней страницы. Кроме того, нам нужно будет отправить параметры в API для вызова определенного блока или страницы в данных (разбиение на страницы).

3. Замена FakeServer () для вашего API

Самая важная функция, с которой вам нужно работать, - это serverSideDatasouse (), здесь вы получаете / извлекаете данные. Эта функция возвращает содержимое (строку данных для отображения в таблице), и внутри этой функции вам нужно будет использовать params.successCallback (content.Rows, lastRow), где conctent.Rows будет массивом данных, который будет отображаться, а LastRow будет либо -1, либо общее количество элементов (в моем случае 3890 строк / элементов ), который вам нужно принести. Эта функция будет вызываться каждый раз, когда мы дойдем до конца таблицы, и нам нужно продолжать возвращать -1, чтобы поддерживать цикл и вызывать выборку с новыми данными. Если мы дойдем до последней страницы, мы вернем общее количество элементов, вызвавших завершение цикла.

В этом примере я использую обычную выборку для получения данных и параметра page, он должен начинаться с нуля. Используя некоторые.

};
};

4. Передайте serverSideDataSource () в params.api.setServerSideDatasource ();

Это последний шаг, нам просто нужно передать указанную выше функцию в params.api.setServerSideDatasource (), выполняя это либо в onGridReady (), либо в функции, запускаемой событием.

Вы можете передать больше атрибутов в serverSideDatasource (), чтобы добавить параметр в URL-адрес вашего API для фильтрации или поиска.

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