Таблица материалов Angular 10 с разбивкой на страницы, фильтрацией и сортировкой

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

Компоненты Angular Material помогут нам создавать привлекательные UI и UX, согласованные и функциональные веб-страницы и веб-приложения, сохраняя при этом современные принципы веб-дизайна, такие как переносимость браузера. и совместимость. В сегодняшней публикации мы будем использовать компонент таблицы в библиотеке Angular Material . Итак, давайте начнем Пример таблицы материалов Angular 10 для начинающих.

Таблица материалов Angular

Сначала установите Angular 10. Мы используем Angular CLI версии 10 для установки Angular. Сейчас последняя версия Angular 10 . Поэтому, если вы не установили Angular CLI , установите его с помощью следующей команды. Он установит Angular CLI 8 , потому что сейчас это последняя версия, и с этого момента вы установите Angular 10.

Шаг 1. Установите Angular 10

Введите следующую команду.

 npm install -g @ angular/cli 

Если вы используете Mac , тогда добавьте команду sudo, чтобы получить администратора и если вы пользователь Windows, откройте CMD в режиме администратора, и вы сможете установить указанный выше пакет глобально на свой компьютер.

Теперь создайте проект Angular 10 с помощью следующей команды.

 ng new mat9table  

Шаг 2. Установите библиотеки материалов Angular.

Зайдите в папку проекта и установите hammerjs с помощью следующей команды.

 npm install --save hammerjs 

Hammer.js является необязательным зависимости и помогает с поддержкой сенсорного ввода для некоторых компонентов.

Теперь установите Angular Material и Angular Animations с помощью следующей команды.

 npm install --save @ angular/material @ angular/animations @ angular/cdk 

Теперь включите hammerjs в файл angular.json . Вы можете найти этот файл в корне проекта angular.

 "scripts": ["./node_modules/hammerjs/hammer.min.js"] 

Шаг 3. Создайте файл модуля пользовательского материала.

Хорошо, теперь в папке src >> app создайте его. файл модуля с именем material.module.ts. Мы создали этот material.module.ts. файл отдельно, потому что в будущем мы сможем импортировать различные компоненты Материала в этот файл, и этот файл мы будем импортировать внутри файла app.module.ts .

Напишите следующий код внутри файла material.module.ts .

//material.module.tsimport {NgModule} from '@angular /core '; import {MatTableModule} from' @ angular/material/table '; @ NgModule ({import: [MatTableModule], exports: [MatTableModule]}) экспорт класса MaterialModule {} 

Здесь , мы импортировали единственный компонент MatTableModule из библиотеки материалов Angular.

Шаг 4: Импорт предварительно созданная тема и значки материалов

Angular Material поставляется с некоторыми предварительно созданными темами. Эти темы дают нам оттенок цвета и основного стиля. Основные доступные темы: индиго-розовый , темно-пурпурный-янтарный , пурпурно-зеленый и розово-сине-серый . Чтобы импортировать тему в наш проект, мы можем добавить следующий код в ваш глобальный файл styles.css . Файл находится внутри папки src .

 @import '~@angular/material/prebuilt-themes/indigo-pink.css'; 

Вы также можете получить доступ к значкам Material Design и использовать эти именованные значки с компонентом . Чтобы импортировать их в свой проект, вы можете добавить это в раздел заголовка корневого файла index.html вашего проекта.

  

Теперь последний шаг — импортировать material.module.ts И другие модули материалов angular и файлы BrowserAnimationsModule внутри app.module.ts файл.

//app.module.tsimport {BrowserModule} из '@ angular/platform-browser'; импортировать {NgModule} из '@ angular/core'; импортировать {BrowserAnimationsModule} из  '@ angular/platform-browser/animations'; импортировать {MaterialModule} из './material.module'; импортировать {AppComponent} из './app.component'; @ NgModule ({объявления: [AppComponent], импорт: [  BrowserModule, MaterialModule, BrowserAnimationsModule], поставщики: [], bootstrap: [AppComponent]}) класс экспорта AppModule {} 

Шаг 5: MatTableMo dule Объяснение

mat-table предоставляет таблицу данных в стиле Material Design , которую можно использовать для отображать строки данных.

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

Давайте рассмотрим пример документации. Теперь напишите следующий код внутри файла app.component.ts .

//app.component.tsimport {Component} из '@ angular/core'  ; интерфейс экспорта PeriodicElement {имя: строка;  позиция: номер;  вес: число;  symbol: string;} const ELEMENT_DATA: PeriodicElement [] = [{позиция: 1, имя: 'Водород', вес: 1.0079, символ: 'H'}, {позиция: 2, имя: 'Гелий', вес: 4,0026,  символ: 'He'}, {позиция: 3, имя: 'Литий', вес: 6,941, символ: 'Li'}, {позиция: 4, имя: 'Бериллий', вес: 9,0122, символ: 'Be'}  , {позиция: 5, имя: 'Бор', вес: 10,811, символ: 'B'}, {позиция: 6, имя: 'Углерод', вес: 12,0107, символ: 'C'}, {позиция: 7,  имя: 'Азот', вес: 14,0067, символ: 'N'}, {позиция: 8, имя: 'Кислород', вес: 15,9994, символ: 'O'}, {позиция: 9, имя: 'Фтор',  вес: 18.9984, символ: 'F'}, {позиция: 10, имя: 'Neon', вес: 20.1797, символ: 'Ne'},];/** * @title Базовое использование `
`*/@ Component ({selector: ‘app-root’, styleUrls: [‘./app.component.css’], templateUrl: ‘./app.component.html’,})export class AppComponent {displayColumns: строка [] = [‘позиция’, ‘имя’, ‘вес’, ‘символ’]; dataSource = ELEMENT_DATA;}

Здесь мы определили интерфейс PeriodicElement с четырьмя переменными. Это модель, которая имеет свои свойства с типами данных.

Затем мы определили образцы данных, а внутри класса AppComponent мы определили массив displayColumns, который состоит из имен столбцов.

Внутри файла app.component.css мы можем написать CSS .

 table {width: 100%;} 

Наконец, напишите HTML-код внутри приложения . component.html .

 
Нет. {{element.position}} Name {{элемент. name}} Weight {{element.weight}} Symbol {{element.symbol}}

Элемент mat-table превращает эту таблицу в материальную.

Атрибут dataSource обеспечивает источник данных для нашей таблицы. Внутри каждого тега ng-container мы определяем определение столбца и отображаемое значение.

Наконец, в последних двух тегах tr мы определяем порядок столбцов заголовков и определений строк. Итак, что нам нужно сделать прямо сейчас, это создать наш источник данных и свойства displayColumns в файле app.component.ts .

Сохраните файл и запустите сервер разработки.

 ng serve -o 

Если все ваши конфигурации верны, вы сможете увидеть таблицу на своей домашней странице.

Если мы изменим порядок элементов внутри массива displayColumns, это изменит порядок столбцов внутри нашей таблицы.

Прямо сейчас, если мы запустим наше приложение на домашней странице, мы увидим заполненную таблицу материалов.

Шаг 6: разбиение на страницы в угловой таблице

Мы также можем добавить разбиение на страницы в нашу угловую таблицу . Для этого нам нужно настроить Table. Во-первых, нам нужно импортировать MatPaginatorModule. Итак, импортируйте MatPaginatorModule внутри файла material.module.ts .

//material.module  .tsimport {NgModule} из '@ angular/core'; импортировать {MatTableModule} из '@ angular/material/table'; импортировать {MatPaginatorModule} из '@ angular/material'; @ NgModule ({import: [MatTableModule, MatPaginatorModule]  , экспорт: [MatTableModule, MatPaginatorModule]}) класс экспорта MaterialModule {} 

Теперь нам нужно импортировать MatPaginator и MatTableDataSource внутри файла app.component.ts .

//app.component.tsimport {Component, OnInit, ViewChild} from '@ angular/core'  ; импортировать {MatPaginator, MatTableDataSource} из '@ angular/material'; экспортировать интерфейс PeriodicElement {name: string;  позиция: номер;  вес: число;  symbol: string;} const ELEMENT_DATA: PeriodicElement [] = [{позиция: 1, имя: 'Водород', вес: 1.0079, символ: 'H'}, {позиция: 2, имя: 'Гелий', вес: 4. 0026, символ: 'He'}, {позиция: 3, имя: 'Литий', вес: 6,941, символ: 'Li'}, {позиция: 4, имя: 'Бериллий', вес: 9,0122, символ: 'Be  '}, {позиция: 5, имя:' Бор ', вес: 10,811, символ:' B '}, {позиция: 6, имя:' Углерод ', вес: 12,0107, символ:' C '}, {позиция:  7, название: 'Азот', вес: 14,0067, символ: 'N'}, {позиция: 8, имя: 'Кислород', вес: 15,9994, символ: 'O'}, {позиция: 9, имя: 'Фтор  ', вес: 18.9984, символ:' F '}, {позиция: 10, имя:' Neon ', вес: 20.1797, символ:' Ne '}, {позиция: 11, имя:' Soldium ', вес: 1.0079,  символ: 'Na'}, {позиция: 12, имя: 'Магний', вес: 4,0026, символ: 'Mg'}, {позиция: 13, имя: 'Алюминий', вес: 6,941, символ: 'Al'}  , {позиция: 14, имя: 'Кремний', вес: 9,0122, символ: 'Si'}, {позиция: 15, имя: 'Фосфор', вес: 10,811, символ: 'P'},]; @ Компонент (  {selector: 'app-root', styleUrls: ['./app.component.css'], templateUrl: './app.component.html',})export class AppComponent реализует OnInit {displaye  dColumns: string [] = ['позиция', 'имя', 'вес', 'символ'];  dataSource = new MatTableDataSource  (ELEMENT_DATA);  @ViewChild (MatPaginator) пагинатор: MatPaginator;  ngOnInit () {this.dataSource.paginator = this.paginator;  }} 

Здесь мы передали данные нашего статического массива в MatTableDataSource , а затем мы присвоили эти данные пагинатору , чтобы мы могли отображать данные в соответствии со значением разбивки на страницы.

Теперь, наконец, добавьте элемент Paginator в файл app.component.html .

 
Нет. {{element.position}} Имя {{element.name}} Weight {{element.weight}} Symbol {{element. symbol}}

Сохраните файл и перейдите на

Здесь вы можете видеть, что мы передали свойство pageSizeOptions в виде массива, а также передали параметры showFirstLastButtons .

Шаг 7. Сортировка таблицы материалов Angular

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

Кроме того, нам нужно разместить директиву mat-sort-header для каждой ячейки заголовка, которая будет запускать сортировку.

Прежде всего, нам нужно импортировать MatSortModule внутри файла material.module.ts . Напишите следующий код внутри файла material.module.ts .

//material.module.tsimport {NgModule} from '@ angular/core'; import  {MatTableModule} из '@ angular/material/table'; импортировать {MatPaginatorModule, MatSortModule} из '@ angular/material'; @ NgModule ({импорт: [MatTableModule, MatPaginatorModule, MatSortModule], экспорт: [MatTableModule, MatPagin  }) export class MaterialModule {} 

Кроме того, добавьте код CSS в файл app.component.css .

 table  {width: 100%;} th.mat-sort-header-sorted {color: black;} 

Теперь импортируйте модуль MatSort внутри файл app.component.ts .

//app.component.tsimport {Component, OnInit, ViewChild} from '@ angular/core'; import {MatPaginator, MatSort  , MatTableDataSource} из '@ angular/material'; интерфейс экспорта PeriodicElement {name: string;  позиция: номер;  вес: число;  symbol: string;} const ELEMENT_DATA: PeriodicElement [] = [{позиция: 1, имя: 'Водород', вес: 1.0079, символ: 'H'}, {позиция: 2, имя: 'Гелий', вес: 4,0026,  символ: 'He'}, {позиция: 3, имя: 'Литий', вес: 6,941, символ: 'Li'}, {позиция: 4, имя: 'Бериллий', вес: 9,0122, символ: 'Be'}  , {позиция: 5, имя: 'Бор', вес: 10,811, символ: 'B'}, {позиция: 6, имя: 'Углерод', вес: 12,0107, символ: 'C'}, {позиция: 7,  имя: 'Азот', вес: 14,0067, символ: 'N'}, {позиция: 8, имя: 'Кислород', вес: 15,9994, символ: 'O'}, {позиция: 9, имя: 'Фтор',  вес: 18.9984, символ: 'F'}, {позиция: 10, название: 'Neon', вес: 20. 1797, символ: 'Ne'}, {позиция: 11, название: 'Soldium', вес: 1.0079, символ: 'Na'}, {позиция: 12, название: 'Magnesium', вес: 4.0026, символ: 'Mg  '}, {позиция: 13, имя:' Алюминий ', вес: 6,941, символ:' Al '}, {позиция: 14, имя:' Кремний ', вес: 9,0122, символ:' Si '}, {позиция:  15, имя: 'Phosphorous', вес: 10,811, символ: 'P'},]; @ Component ({selector: 'app-root', styleUrls: ['./app.component.css'], templateUrl: '  ./app.component.html',})export class AppComponent реализует OnInit {displayColumns: string [] = ['position', 'name', 'weight', 'symbol'];  dataSource = новый MatTableDataSource (ELEMENT_DATA);  @ViewChild (MatPaginator) пагинатор: MatPaginator;  @ViewChild (MatSort) сортировка: MatSort;  ngOnInit () {this.dataSource.paginator = this.paginator;  this.dataSource.sort = this.sort;  }} 

По умолчанию сортировка начинается сначала по возрастанию, а затем по убыванию. Мы можем изменить это поведение, добавив атрибут matSortStart в desc рядом с директивой matSort.

Если мы не хотим использовать MatTableDataSource для сортировки, но чтобы предоставить нашу собственную логику сортировки, мы можем использовать событие (matSortChange) для получения активного столбца сортировки и порядка сортировки.

То же, что и объект paginator, мы прикрепили сортировать объект в источник данных . Теперь нам все, что нужно сделать, это добавить свойства в файл app.component.html .

 
{{element.position}} Weight
Нет. Имя {{element.name}} {{element.weight}} Symbol {{элемент. symbol}}

Сохраните файл и теперь у вас есть рабочая таблица материалов Angular с разбиением на страницы и сортировкой .

Шаг 8: Функция фильтрации материалов Angular

Для этой функции нам нужно предоставить собственное поле ввода и настраиваемую функцию для фильтрации наших данных. Только тогда мы можем использовать свойство фильтра MatTableDataSource. Чтобы реализовать фильтрацию, мы собираемся добавить следующий код прямо над нашей таблицей в файле app.component.html.

 

А затем написать следующую функцию в файле app.component.ts.

//app.component.tspublic doFilter = (value: string) => {this  .dataSource.filter = значение.trim (). toLocaleLowerCase ();  } 

Наконец, поскольку мы используем директиву matInput для преобразования обычного ввода в поле ввода материала, нам необходимо зарегистрировать его модули внутри material.module.ts файл.

//material.module.tsimport {..., MatFormFieldModule, MatInputModule} из '@ angular/material'; импорт: [MatFormFieldModule, MatInputModule, экспорт: [MatFormFieldModule, MatInputModule,  

Как видно из файла HTML, мы используем директиву fxLayout,

Теперь нам нужно импортировать FlexLayoutModule в файл app.module.ts как хорошо:

//app.module.tsimport {FlexLayoutModule} из '@ angular/flex-layout'; импорт: [... FlexLayoutModule], 

Сейчас , мы полностью завершили таблицу материалов Angular 10 с функциями фильтрации, сортировки и разбивки на страницы с нуля.

Наконец, Пример таблицы материалов Angular 10 с фильтрами, сортировкой и разбиением по страницам Учебник окончен.

Люди тоже ищут

Angular Material

Пример модального Angular

Значки Angular материала

Пример Angular NgClass

Угловые формы

Оцените статью
nanomode.ru
Добавить комментарий