Реализация пользовательских компонентов ag-Grid в Angular с использованием материала Angular
Angular Grid - это компонент сетки данных от ag-Grid. Это помогает в создании надежного и масштабируемого приложения Angular Enterprise, которое включает в себя большой объем данных, отображаемых в таблице. Помимо табличного представления, ag-Grid предоставляет различные способы интеграции диаграмм в вашу таблицу, которые могут быть предварительно определены или динамически созданы из приложений. Используя ag-Grid, вы можете имитировать почти все операции, которые могут быть выполнены на листе Excel в веб-приложении.
Это краткое введение в Angular Grid. Как видите, Angular Grid предоставляет множество функций, которые очень полезны для корпоративного приложения. Несмотря на то, что пользовательский интерфейс по умолчанию, предоставляемый ag-Grid, может быть не тем, который вы ожидаете от своего приложения, мы можем настроить почти все компоненты ag-Grid в соответствии с нашими требованиями.
В этой статье я собираюсь кратко объяснить, как реализовать сетку Angular в вашем приложении и реализовать настройку для разбивки на страницы, фильтрации и рендеринга ячеек с материальными компонентами пользовательского интерфейса.
Необходимое условие
Для понимания этой статьи необходимы базовые знания angular.
Начнем…
Вы можете создать новое приложение с помощью Angular CLI или просто взять существующее приложение angular для реализации сетки Angular.
Я собираюсь использовать угловатый материал для стилизации моих пользовательских компонентов ag-Grid. Вы можете обратиться к приведенной ниже ссылке, чтобы настроить свой проект Angular для использования Angular Material.
Https://material.angular.io/guide/getting-started
- Первое, что вам нужно, это установить ag-Grid в ваше угловое приложение. Для этого запустите в своем терминале следующее.
Теперь добавьте модуль ag-Grid Angular в наш модуль приложения.
Импортируйте файлы стилей в ваш общий style.scss, как показано ниже.
Источник: https://www.ag-grid.com/angular-grid/
2. Теперь создайте простой компонент сетки с шаблоном, как показано ниже.
В columnDefs укажите имя заголовка и соответствующее имя поля. И в rowData привяжите данные для таблицы.
После этого вы получите такую таблицу.
Вот и все. С помощью всего нескольких линий ваша сетка готова. Эта сетка сама по себе выполняет множество операций, таких как сортировка, фильтрация, изменение размера, редактирование ячеек и т. Д., Просто устанавливая соответствующие флаги в вашем columnDefs.
Теперь давайте сделаем несколько настроек в приведенной выше сетке. Я собираюсь выполнить настройку разбивки на страницы, фильтрации, рендеринга ячеек и редактирования ячеек.
Пользовательская разбивка на страницы
Включить разбиение на страницы в ag-Grid очень просто. Вам просто нужно установить свойство сетки pagination=true. В ag-Grid есть разные модели строк, и нумерация страниц поддерживается всеми разными моделями строк. Я собираюсь использовать Клиентскую модель строк, которая является моделью строк по умолчанию. Итак, пример, который я собираюсь сделать, - это нумерация страниц на стороне клиента. То же самое можно сделать и для нумерации страниц на стороне сервера. Единственная разница в том, что вы будете вызывать api для каждого запроса страницы, и строка будет отображаться на основе ответа api.
Эти новые свойства необходимо добавить в компонент сетки. В этом примере я устанавливаю paginationPageSize равным 5. Если не указано, значение по умолчанию - 100. И, конечно же, мне не нужна панель разбивки на страницы по умолчанию из ag-Grid, поэтому я устанавливаю suppressPaginationPanel=true. Вместо этого я добавляю мой собственный компонент для разбивки на страницы, как показано ниже.
Моя панель разбивки на страницы выглядит так.
Давайте добавим функциональность для навигации.
this.gridApi.paginationGoToPage (индекс); → Переход к определенной странице по индексу.
this.gridApi.paginationGoToNextPage (); → Перейти на следующую страницу.
this.gridApi.paginationGoToPreviousPage (); → Перейти на предыдущую страницу.
Это все, что вам нужно. Теперь ваша собственная панель пагинации, интегрированная с ag-Grid, готова. 🙂
Пользовательская фильтрация столбцов
Как указано в названии, они зависят от столбца, и свойство filter необходимо установить для каждого столбца, в котором вы хотите применить фильтр. Помимо установки filter=true (устанавливает фильтр поиска по умолчанию) вы можете установить другие типы фильтров, предоставляемые ag-Grid, напримерfilter: 'agNumberColumnFilter', filter: 'agDateColumnFilter', etc…. Подобно этим, вы можете иметь свой собственный компонент фильтра.
Чтобы создать собственный фильтр, создайте компонент, реализовав интерфейс IFilterAngularComp. Методы из IFilterAngularComp, которые нам нужны для работы нашего фильтра, следующие:
agInit → Аналогично ngOnInit для angular. Этот жизненный цикл вызывается после инициализации компонента сетки.
isFilterActive → Проверяет и устанавливает значок фильтра в заголовке, если столбец фильтруется.
doesFilterPass → Добавьте сюда критерии фильтрации. Например, если вы создаете фильтр поиска, вы можете добавить логику для фильтрации строк на основе текста поиска.
getModel & setModel → Получатель и установщик для значения, набранного или выбранного в вашем фильтре.
ngAfterViewInit → Вы можете использовать это в зависимости от ваших потребностей. В моем примере я использую его для фокусировки поля ввода после инициализации представления. Примечание. Это похоже на жизненный цикл ngAfterViewInit файла angular. Но помните, что оба они не одно и то же. NgAfterViewInit Ag-Grid принимает параметры типа IAfterGuiAttachedParams, тогда как обработчик жизненного цикла angular не принимает никаких параметров.
this.params.filterChangedCallback (); → Вызовите этот метод после применения фильтра. Поскольку вы используете настраиваемый фильтр, необходимо сообщить ag-Grid, что ваш фильтр применен. Этот обратный вызов сделает это за вас.
Как только вы правильно примените все эти свойства, ваш компонент фильтра будет готов. Но вам все равно нужно зарегистрировать его как фильтр столбцов в ag-Grid. Для этого вы должны сообщить ag-Grid, что эти компоненты являются компонентами инфраструктуры ag-Grid, а не обычными. Вы можете установить это через свойство сетки [frameworkComponents]="FrameworkComponents".
Кроме того, добавьте его в импорт модуля ag-Grid в app.module.ts, как показано ниже.
Теперь вы можете просто добавить его в свой columnDefs. Значение, которое вы указали для свойства фильтра, должно быть тем же ключом, который вы использовали для регистрации этого компонента в компонентах платформы. В моем примере это searchFilterComponent:SearchFilterComponent
Как только это будет сделано, ваш настраиваемый фильтр готов. В этом примере вы можете увидеть, как разбиение на страницы настраивается на основе вашей фильтрации. Это было действительно круто !!
Помимо фильтров столбцов, ag-Grid также предоставляет внешний фильтр и быстрый фильтр.
Пользовательский рендеринг ячеек
По умолчанию значения вашей сетки будут отображаться как простые тексты. Чтобы использовать HTML внутри своей ячейки, вы можете использовать средство визуализации ячеек.
Пользовательский компонент визуализации ячеек может быть создан путем реализации интерфейса ICellRendererAngularComp.
Вы можете получить значение ячейки из параметров ag-Grid в agInit. Это значение можно использовать в файле шаблона по своему усмотрению.
Чтобы показать это, я собираюсь добавить в свою сетку дополнительный столбец «статус».
Подобно настраиваемой фильтрации, вам необходимо зарегистрировать свой StatusRendererComponent в компонентах инфраструктуры и AgGridModule. (см. предыдущие фрагменты). В моем примере я использовал кнопку-переключатель для статуса, который можно динамически изменять в пользовательском интерфейсе.
Пользовательское редактирование ячеек
Чтобы разрешить редактирование ячеек во всех столбцах вашей сетки, самый простой способ - указать colDef.editable=true.. Вы также можете указать editable:true для любого конкретного столбца в columnDefs. Это сделает редактируемым только этот конкретный столбец.
По умолчанию ячейку можно редактировать, дважды щелкнув по ней. Также есть свойства, позволяющие изменить это поведение. См .: https://www.ag-grid.com/javascript-grid-cell-editing/
Пользовательский компонент редактирования ячеек можно создать, реализовав интерфейс ICellEditorAngularComp.
Вы можете получить значение ячейки из params в agInit и связать измененное значение с помощью getValue.
this.params.api.stopEditing (); можно использовать для остановки редактирования и отображения ячейки в режиме чтения.
В моем примере я использую компонент выбора для редактирования столбца «Технологический поток».
Как и в случае с другими, вам необходимо зарегистрировать свой StreamEditorComponent в компонентах фреймворка и AgGridModule. Включите его в columnDefs, как показано ниже, вместе с editable = true.
Окончательная сетка будет такой же с моим настраиваемым полем редактора ячеек.
Таким образом, проще реализовать угловые формы, проверку полей и форматирование в угловой сетке. Это будет очень полезно, если вы пытаетесь реализовать массовое сохранение в сетке.
Заключение
Надеюсь, теперь вы хорошо разбираетесь в настройке с помощью ag-Grid. В g-Grid есть еще много возможностей, которые можно изучить и изучить.
Более того, ag-Grid можно использовать вместе с React (React Grid) и Vue (Vue Grid).
Надеюсь, эта статья оказалась для вас полезной!
Вы можете увидеть рабочую демонстрацию вышеуказанного приложения здесь.
Ссылка на Github: https://github.com/Inica/my-aggrid-angular-app
