DevExpress — это набор инструментов и элементов управления, которые помогают создать графический пользовательский интерфейс, и предлагает множество виджетов HTML5/JS. Это экономит время программиста, а также очень легко настраивается по мере необходимости.

DevExtreme — это набор компонентов для создания быстродействующих веб-приложений для сенсорных устройств и традиционных настольных компьютеров. Пакет включает в себя более 50 компонентов пользовательского интерфейса, готовых к использованию с jQuery, Angular, AngularJS, Knockout, ASP.NET MVC или ASP.NET Core: сетка данных, интерактивные диаграммы, редакторы данных, навигация и многоцелевые виджеты, разработанные для гармоничного внешнего вида и поведения. в любом браузере. — Источник

Интеграция компонентов DevExtreme и проекта Angular очень проста. Вам необходимо добавить последнюю версию пакета DevExtreme в уже созданное приложение Angular:

$ npm install [email protected] [email protected] –save –save-exact

разрешение использования компонентов DevExpress.

После попытки запустить проект получаем следующее сообщение:

Чтобы решить эту проблему, нам нужно установить поток с помощью команды $ npm install stream.

Следующим шагом является добавление dx.common.css и dx.light.css в файл angular.json в «стилях», чтобы применить тему по умолчанию к нужным компонентам.

Тему можно выбрать на официальном сайте.

Последнее, что нужно сделать, чтобы иметь возможность использовать компоненты DevExtreme, — это добавить в ngModule имя компонента, который мы хотим отобразить. В данном примере это DxDataGridModule, и мы делаем это следующим образом:

Затем мы создаем таблицу в HTML и получаем следующий результат.
Представление показывает созданную таблицу данных, которую можно фильтровать по любому параметру и сортировать по желанию. Таким образом, можно автоматически сортировать и фильтровать данные, импортируя компонент DevExtreme. Работа с данными очень проста.

Чтобы повлиять на внешний вид таблицы, необходимо использовать селектор псевдокласса «ng-deep». (В противном случае, если у нас есть несколько компонентов, нам нужно добавить ': host' перед:: ng-deep, чтобы CSS применялся только к этому компоненту, а не глобально. Но поскольку в этом примере только один компонент, оставим так.

Использование следующего кода сделает заголовок таблицы темно-серым, а имена заголовков — полужирными:

Следующий пункт — разрешить удаление и редактирование данных. Это должно быть сделано внутри тегов, указывающих метод редактирования, а также возможно индивидуально определить, следует ли удалять, редактировать или добавлять новую строку, используя значения true/false.
Похоже, это быть командой «режим».
В нашем примере включено редактирование, добавление и удаление во всплывающем окне, а кроме него есть еще строчный режим, пакетный режим, режим ячейки и режим формы.

В нижней части таблицы можно добавить сводку по каждому столбцу. «Массив TotalItems». Самый простой способ — передать имя столбца, который вы хотите обобщить, и как, в зависимости от того, какие данные вы хотите получить. В этом примере вы увидите сводку по количеству пользователей, расположенную под столбцом «Ime». Также в представлении показано, как число увеличивается динамически, то есть в зависимости от добавления новых пользователей или удаления существующих пользователей.

DisplayFormat предназначен только для указания того, что он будет писать внизу таблицы, вместо предопределенного формата DevExtreme «Сумма/количество…» при передаче {0} значения, которое мы хотим отобразить.

Если к элементу внутри компонента должен быть применен дополнительный эффект наведения, метод (onCellHoverChanged) = «hover ($ event)»
в dx-data-grid в HTML-документе, а внутри компонента .ts этот метод должен быть определен следующим образом:

Приведенный выше метод показывает несколько условий, по которым мы сообщаем компоненту, что если тип строки 'данные' (это необходимо, чтобы эффект не относился к заголовкам или заголовку таблицы) и если он столбец 'Ime', то мы хотим, чтобы при наведении указателя мыши информация внутри выбранного элемента ячейки была выделена жирным шрифтом и окрашена в желтый цвет, в противном случае цвет будет черным и fontWeight нормальным.

В нашем примере мы добавим еще один столбец под названием «Брой становника по км2 (Население на км2)». Мы сделаем это следующим образом. Чтобы повысить эффективность имени столбца, нам нужно назначить «шаблон» [headerCellTemplate] нужному столбцу в HTML-документе, где мы передаем ему желаемое имя. После определения столбца и указания формата данных в таблице (тип: ‘fixedPoint’, точность: 0), нам нужно сказать, что мы хотим сделать из этого заголовка. Поэтому в dxTemplate внутри элемента мы указываем имя столбца по желанию, с дополнительным тегом, между которым вписываем число, которое мы хотим отобразить как потенцию. Остальное чистый CSS.

Теперь необходимо определить в CSS, какие размеры мы хотим, чтобы это число имело, и мы делаем это, сначала указав идентификатор таблицы (#gridContainer) и затронутый элемент (sup) с селектором псевдокласса 'ng-deep'.

Результат:

Это будет упрощенное представление использования компонента сетки данных DevExtreme в проекте Angular. В другом посте мы рассмотрим другие компоненты и их реализацию.

Веб-сайт: https://www.alenibric.com.tr