Многоразовый компонент угловой сетки с использованием syncfusions ejs-angular-grid

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

ng serve -o

Он автоматически откроет браузер со страницей, похожей на эту.

Затем откройте проект в своей любимой среде IDE, перейдите к src/app/app.component.html и замените все его содержимое внутри компонентом выхода углового маршрутизатора:

<router-outlet></router-outlet>

Теперь давайте создадим наш первый компонент с помощью команды CLI. В корневом каталоге проекта выполните команду.

ng new component container

Затем мы должны обновить модуль маршрутизации src/app/app-routing.module.ts, чтобы направлять URL-запросы только что созданному компоненту, мы обновим эту строку в будущем . сейчас перейдите в src/app/app-routing.module.tsи обновите переменную routes, включив в нее конфигурацию пути, подобную этой .

const routes: Routes = [
{ path: "", component: ContainerComponent }
];

Окно браузера обновится, и вы должны увидеть содержимое ContainerComponent по умолчанию.

app-container works

Теперь давайте добавим пакет npm для syncfusion grid и все необходимые зависимости в нашу рабочую область, выполнив:

npm install --save @syncfusion/ejs-angular-grid

Это позволит импортировать компонент сетки syncfusion вместе со всеми его зависимостями и обновить раздел зависимостей файла src/package.json записью пакета.

Для получения дополнительной информации о сетке синхронизации и о том, как ее настроить, обратитесь к этой ссылке.

“dependencies”: {
        ...
       “@angular/router”: “~8.2.14”,
       “@syncfusion/ej2-angular-grids”: “^17.4.43”,
        ...
}

Обновите src/app/app.module.ts, добавив импорт GridModule и требуемые сервисные зависимости для его работы. может использовать его в нашем приложении.

@NgModule({
declarations: [AppComponent, ContainerComponent],
imports: [BrowserModule, GridModule, AppRoutingModule],
providers: [
            SortService,
            FilterService,
            GroupService,
            EditService,
            ExcelExportService,
            ColumnChooserService,
            ColumnMenuService,
            SearchService,
            PdfExportService,
            ReorderService,
            CommandColumnService,
            ToolbarService,
            ResizeService,
            PageService,
            ContextMenuService
],
bootstrap: [AppComponent]
})

Давайте также импортируем весь CSS, используемый для придания сетке макета. добавьте этот импорт в глобальный файл CSS проекта src/styles.css

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

Теперь, когда мы настроили все необходимые модули и зависимости, мы можем приступить к созданию многоразовой сетки с их использованием. Сначала замените содержимое src/app/container/container.component.ts и src/app/container/container.component.htmlсодержимым ниже, соответственно, мы обсудим, что делает каждая строка кода одна за другой.

Затем создайте папку с именем interfaces в разделе src/app/interfaces и создайте все файлы пользовательской модели данных, которые мы определили ниже для нашего компонента-контейнера.

Теперь давайте начнем с изучения всех свойств, определенных контейнером внутри src/app/container/container.component.ts, прежде чем переходить к изучению методов.

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

Я использовал привязку данных Input для передачи данных из родительских контейнеров, которые используют компонент. Я объясню, что такое каждое свойство Input и для чего оно используется.

• Input()columnsList — Массив определений столбцов, который определяет каждый столбец и его тип для динамического создания столбцов.
• Данные Input() — данные, которые мы хотим получить от родительского компонента.
• Input() showUpdate — показывает или скрывает кнопку обновления в сетке.
• Input() showDelete — показывает или скрывает кнопку «Удалить» в сетке.
• Input() showAdd — показывает или скрывает кнопку «Добавить» в сетке.
• Input() showPdfExport — показывает или скрывает кнопку PDF в сетке.
• Input() showExcelExport — показывает или скрывает кнопку экспорта Excel в сетке.
• Input()showColumnChooser — показывает или скрывает кнопку выбора столбца в сетке.
• Input()deleteRoute — используется для изменения маршрута по умолчанию при нажатии кнопки удаления. маршрут по умолчанию — http|s://current_url/selected_item_id.
• Input() editRoute — используется для изменения маршрута по умолчанию при нажатии кнопки редактирования. по умолчанию используется http|s://current_url/selected_item_id/update.
• Input()addRoute — используется для изменения маршрута по умолчанию при нажатии кнопки добавления. по умолчанию используется http|s://current_url/add
• Input()allowGrouping — включает или отключает функцию группировки.

Я также определил свойства/события Output, которые будут передавать данные в родительский контейнер, а именно:

• Вывод dataQueried — срабатывает каждый раз, когда в сетке выполняется операция запроса. он выдает текущее состояние сетки фильтр, разбиение на страницы, сортировка, размер страницы, группировка в стандартном формате строки запроса URL.
• Вывод rowSelected — запускается каждый раз, когда строка выбирается либо для операций обновления, либо для удаления. он выдает идентификатор выбранной строки.
• ВыводdeleteRecord — срабатывает каждый раз, когда нажимается кнопка удаления. он выдает идентификатор выбранной строки.
• Output() editRecord — срабатывает каждый раз при нажатии кнопки редактирования. выдает идентификатор выбранной строки.

Теперь, когда мы рассмотрели определенные свойства, давайте рассмотрим функции инициализации, которые используют вышеуказанные входные свойства для создания желаемого компонента сетки.

• инициализироватьCommandColumn()

initilizeCommandColumn(): void {
    if (this.showUpdate) {
        this.commands.push({
              buttonOption: {
                  iconCss: "e-icons e-edit",
                  cssClass: "e-flat",
                  click: this.editAction.bind(this)
              }
              });
    }
    if (this.showDelete) {
          this.commands.push({
               buttonOption: {
                  iconCss: "e-icons e-delete",
                  cssClass: "e-flat",
                 click: this.deleteAction.bind(this)
                }
          });
    }
}

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

• инициализироватьToolbar()

initializeToolBar(): void {
      if (this.showAdd) {
            this.toolbar.push({
                      text: "Add",
                      prefixIcon: "e-create",
                       id: "add"
                    });
      }
      if (this.showPdfExport) { 
            this.toolbar.push({
                   text: "PdfExport",
                   prefixIcon: "e-Pdf_Export",
                   id: "pdfExport"
             });
      }
      if (this.showExcelExport) {
           this.toolbar.push({
                 text: "ExcelExport",
                 prefixIcon: "e-Excel_Export",
                 id: "excelExport"
           });
      }
      if (this.showPrint) {
           this.toolbar.push({
                text: "Print",
                prefixIcon: "e-print",
                id: "print"
           });
      }
}

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

Далее давайте рассмотрим функции эмиттера/обработчика событий, определенные внутри многоразового контейнера.

• панель инструментовClick

toolbarClick(args: ClickEventArgs): void {
     switch (args.item.id) {
          case "create":
             if (this.addRoute.trim().length === 0 {
               this.router.navigate(["add"], { relativeTo: this.activatedRoute });
             } else {
              this.router.navigate([this.addRoute]);
             }
           break;
          case "pdfExport":
              this.grid.pdfExport();
           break;
         case "excelExport":
           this.grid.excelExport();
          break;
         case "print":
            window.print();
          break;
        }
}

Эта функция обрабатывает событие toolbarClick, которое запускается каждый раз при нажатии кнопки на панели инструментов. он проверяет, является ли выбранная кнопка create, pdfexport, excelExport, print, и выполняет соответствующее действие, вызывая соответствующую функцию компонента сетки syncfusion.

добавьте дополнительный оператор if, чтобы расширить функциональность этой функции, если хотите.

• onDataStateChange —обрабатывает событие dataStateChange, инициируемое при таких действиях сетки, как Сортировка, Разбиение по страницам, Группировка и т. д., и генерирует DataStateChangeEventArgs. в этой функции мы просто генерируем событие dataStateChanged, передавая родительскому компоненту то же значение, которое мы получаем от события dataStateChange.
• actionEndHandler —обрабатывает событие actionComplete. Запускается при выполнении действий сетки, таких как сортировка, фильтрация, разбиение по страницам, группировка и т. д. завершены. в этом обработчике мы преобразуем параметр события ActionEventArgs в пользовательскую модель данных Querystringипередаем ее в родительский контейнер.

Мы достаточно изучили файл src/app/container/container.component.ts, теперь давайте перейдем к его аналогу. src/app/container/container.component.html» и что он делает.

Как видите, мы назначили все свойства и обработчики событий, определенные внутри src/app/container/container.component.ts. нас интересует свойство columnsList типа CustomGridModel (определенный нами пользовательский тип) и процесс создания столбцов динамически.

Внимательно изучите код строки

*ngFor=”let column of columnsList”

Он перебирает список столбцов, который родитель определил и передал в качестве входного параметра, и динамически создает столбцы. затем проверьте строку

*ngIf=”commands.length > 0"

Он проверяет, есть ли какие-либо регистрации в свойстве команды, и скрывает их от отображения, если они не содержатся.

Мы успешно создали наш многоразовый контейнер, осталось только создать родительский контейнер, который использует его для представления своих данных. поэтому мы собираемся сделать именно это. перейдите в окно терминала и создайте новый компонент, запустив

ng generate component View

обновите каждый файл компонента представления следующим кодом.

давайте рассмотрим каждый файл компонента представления

• src/app/view/view.component.ts —в этом файле мы создали несколько свойств, определяющих фиктивные данные, которые мы хотим представить, их структуру (столбцы) и несколько обработчиков событий dataQueried, который просто записывает данные, передаваемые на консоль, для демонстрационных целей.
• src/app/view/view.component.html —в этот файл мы импортировали контейнер приложениякомпонент, который мы создали ранее и передали несколько свойств, используя входную привязку, а именно columnList, data, showDelete, showUpdate, и подписались на одно событие dataQueried

Затем вам нужно обновить src/app/app-routing.module.ts, чтобы перенаправить URL-запрос на вновь созданный ViewComponent вместо предыдущий маршрут к ContainerComponent.

const routes: Routes = [{ path: “”, component: ViewComponent }];

если вы обновите свой браузер, вы сможете увидеть контейнер сетки, который мы только что создали, в действии.

Поздравляем Мы успешно создали многоразовый грид-контейнер, который мы можем использовать в приложениях, которые предоставят нам согласованный пользовательский интерфейс. вы можете пойти дальше и добавить дополнительные функции, которые соответствуют вашим потребностям. вы можете найти полную кодовую базу здесь.

Справочник

• Официальная документация Angular
• Официальная документация Angular CLI
• Официальная документация Syncfusion Angular