Часть «ag» в ag-Grid означает «агностик». Внутренний механизм ag-Grid реализован на TypeScript с нулевыми зависимостями. С ag-Grid можно не использовать фреймворк и использовать полнофункциональную версию только для JavaScript. ag-Grid также поддерживает все основные фреймворки, предоставляя компоненты ag-Grid для каждого популярного фреймворка и позволяя настраивать сетку с использованием фреймворка по вашему выбору.

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

Помимо стандартного набора функций, который вы ожидаете от любой сетки:

  • Взаимодействие столбцов (изменение размера, изменение порядка и закрепление столбцов)
  • Пагинация
  • Сортировка
  • Выбор строки
  • "более"

Настройка приложения Angular

  1. создание нового углового проекта
ng new ag-Grid-demo --style scss --routing false

2. npm install --save ag-grid-community ag-grid-angular

3. Добавьте модуль ag-grid в app.module.ts

4. Добавьте стили в styles.scss

Реализация

Теперь, когда мы настроили основную вещь, мы можем приступить к реализации. Для начала давайте разберемся, что мы собираемся строить. Мы будем создавать ag-Grid с такими функциями, как рендеринг данных, перетаскивание столбцов, сортировка и фильтрация.

  1. Откройте свой app.component.ts, внутри конструктора app.component.ts мы получим данные из конечной точки HTTP и установим rowData на то, что мы получаем из ответа.

Данные в HTTP-ответе выглядят так:

2. Следующим шагом является установка заголовков сетки, именно так мы устанавливаем заголовки сетки. Свойство headerName - это то, что мы видим в заголовке сетки, а field - это ключевое значение в данных строки.

3. Так выглядит app.component.html

мы связываем определения столбцов с columnDefs, инициализированным внутри app.component.ts, и rowData с ответом конечной точки HTTP

Благодаря этому у вас есть рабочая ag-Grid, которая выглядит примерно так

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

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

5. Как и в случае с сортировкой, включить фильтрацию так же просто, как установить свойство filter:

Вот ссылка на проект:



adityajoshi12 / ag-grid-demo
Этот проект был создан с помощью Angular CLI версии 7.3.9. Запустите ng serve для сервера разработки. Перейдите на… github.com



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