Таблицы широко распространены в веб-продуктах, потому что они являются одним из самых простых способов представления и организации сложных данных. Простые HTML-таблицы решают наиболее распространенные сценарии использования, но попытка сделать с ними что-то сложное быстро разочарует вас.
Это когда разработчики должны принять решение. Они либо начинают кодировать таблицы старомодным способом, создавая HTML-таблицы и самостоятельно добавляя улучшения — рискуя потерять фокус своего проекта, — либо ищут существующие на рынке продукты, которые уже решают эти проблемы.
Многие компании используют таблицы данных для отображения сложных отчетов, информационных панелей, финансовых данных, результатов продаж и даже интерактивных электронных таблиц. Вместе с высоким спросом пришло специализированное предложение, поэтому таблицы повсеместно используются в библиотеках веб-компонентов.
Сегодня существуют специальные элементы управления смарт-таблицами, созданные для фреймворка Angular, которые обрабатывают табличную часть за вас и предоставляют дополнительные функции, включая режимы выбора, сортировку и изменение порядка столбцов.
В этой статье описывается, какие возможности ожидаются от интеллектуальной таблицы, оценивается проект с открытым исходным кодом и демонстрируется, как реализовать интеллектуальные таблицы данных корпоративного уровня с помощью Wijmo FlexGrid, решения GrapeCity для платформы Angular.
Возможности таблицы
Насколько умным может быть умный стол? Простого добавления нескольких функций в простую HTML-таблицу недостаточно. Текущие продукты на рынке могут сильно различаться, но есть некоторые ключевые функции, которые люди ожидают увидеть, когда ищут интеллектуальную таблицу данных:
Функции данных
- Импорт данных из различных источников и экспорт в них, включая локальные файлы (включая импорт и экспорт Excel), базы данных и API-интерфейсы.
- Параметры поиска, фильтрации и сортировки
- Загружайте и отображайте большие наборы данных с разбиением на страницы
Особенности пользовательского интерфейса
- Отображение и скрытие столбцов
- Встроенное редактирование
- Отзывчивость: встроенная поддержка настольных и мобильных устройств.
- Столбцы с изменяемым размером для размещения длинных точек данных или многострочных комментариев
- Поддержка горизонтальной и вертикальной прокрутки
- Проверка данных и визуализация, например спарклайны
Некоторые фреймворки имеют встроенные реализации с несколькими функциями, но вам нужно кодировать расширенные функции, требующие незапланированных усилий по разработке.
Использование таблиц данных с Angular
Angular, поддерживаемый Google и при участии отдельных разработчиков и компаний, представляет собой интерфейсную платформу веб-приложений с открытым исходным кодом, основанную на TypeScript.
В отличие от других облегченных библиотек JavaScript, Angular представляет собой полноценную среду разработки сложных одностраничных приложений (SPA). Приложения Angular построены на самоуверенной архитектуре, а это означает, что приложения должны быть написаны с учетом некоторых соглашений и передовых практик, чтобы работать правильно.
Надежная архитектура Angular — одна из основных причин, по которой многие средние и крупные компании приняли этот фреймворк. Благодаря такому сильному внедрению в корпоративной среде несколько сообществ с открытым исходным кодом и сторонние поставщики создали компоненты производительности для предприятий, основанных на Angular.
Некоторые популярные библиотеки интеллектуальных таблиц данных с открытым исходным кодом, созданные для Angular, включают:
- swimlane/ngx-datatable: многофункциональная, но легкая таблица данных, созданная для Angular
- angular-ui/ui-grid: UI Grid: Angular Data Grid
- angular-data-grid/angular-data-grid.github.io: легкая и гибкая сетка данных для AngularJS
- shlomiassaf/ngrid: Угловая сетка для предприятия
- yanivps/angular-7-data-table: таблица данных Angular 7
Реализация приложения Angular с ngx-datatable
Различные проекты с открытым исходным кодом, перечисленные выше, имеют свои преимущества и недостатки. В зависимости от того, какие функции вы ищете, некоторые из этих компонентов будут оцениваться выше, чем другие, поэтому давайте продемонстрируем только один из них.
Мы реализуем новое приложение Angular на основе Node с ngx-datatable, компонентом с открытым исходным кодом, внешний вид которого близок к смарт-таблице, которую мы продемонстрируем в конце. .
Сначала установите Node.js. Затем с помощью консоли командной строки создайте новое приложение Node и перейдите в его папку:
ng new my-app cd my-app
Установите угловой пакет…
npm i @angular/core…и запустите ваше новое приложение:
npm start
Теперь нам нужно установить пакеты ngx-datatable и bootstrap:
npm i @swimlane/ngx-datatable npm i bootstrap
Создайте новую папку с именем data в папке src и создайте новый файл с именем data.js. Эти данные представляют информацию о продажах, которая будет использоваться для заполнения нашей сетки данных:
export const recentSales = [
{
id: 1,
country: "Canada",
soldBy: "Bill",
client: "Cerberus Corp.",
description: "Prothean artifacts",
value: 6250,
itemCount: 50
},
{
id: 2,
country: "Canada",
soldBy: "Bill",
client: "Strickland Propane",
description: "Propane and propane accessories",
value: 2265,
itemCount: 20
},
{
id: 3,
country: "USA",
soldBy: "Ted",
client: "Dunder Mifflin",
description: "Assorted paper-making supplies",
value: 4700,
itemCount: 10
},
{
id: 4,
country: "USA",
soldBy: "Ted",
client: "Utopia Planitia Shipyards",
description: "Dilithium, duranium, assorted shipbuilding supplies",
value: 21750,
itemCount: 250
},
{
id: 5,
country: "USA",
soldBy: "Ted",
client: "Glengarry Estates",
description: "Desks, phones, coffee, steak knives, and one Cadillac",
value: 5000,
itemCount: 5
},
{
id: 6,
country: "Germany",
soldBy: "Angela",
client: "Wayne Enterprises",
description: "Suit armor and run-flat tires",
value: 35000,
itemCount: 25
},
{
id: 7,
country: "Germany",
soldBy: "Angela",
client: "Stark Industries",
description: "Armor and rocket fuel",
value: 25000,
itemCount: 10
},
{
id: 8,
country: "Germany",
soldBy: "Angela",
client: "Nakatomi Trading Corp.",
description: "Fire extinguishers and replacement windows",
value: 15000,
itemCount: 50
},
{
id: 9,
country: "UK",
soldBy: "Jill",
client: "Spaceley Sprockets",
description: "Anti-gravity propulsion units",
value: 25250,
itemCount: 50
},
{
id: 10,
country: "UK",
soldBy: "Jill",
client: "General Products",
description: "Ion engines",
value: 33200,
itemCount: 40
}];
Добавьте новую папку opensource-demo в папку приложения и создайте три новых файла с именами opensource-demo.css, opensource-demo.html и opensource-demo.ts. Эти файлы будут содержать таблицу стилей, HTML и код TypeScript, необходимые для нашего нового компонента:
/my-app
/src
/app
/opensource-demo
opensource-demo.css
opensource-demo.html
opensource-demo.ts
Откройте файл opensource-demo.css и добавьте импорт ниже. Это применит таблицы стилей, необходимые для компонента с открытым исходным кодом:
@import '@swimlane/ngx-datatable/themes/bootstrap.css'; @import '@swimlane/ngx-datatable/assets/app.css'; @import 'bootstrap/dist/css/bootstrap.css';
Откройте файл opensource-demo.ts и добавьте приведенный ниже код TypeScript. Здесь мы импортируем данные о продажах и экспортируем наш демонстрационный класс, а также объявляем переменную состояния Angular, которая будет использоваться сеткой данных в качестве источника данных компонента:
import { Component, ViewEncapsulation } from '@angular/core';
import { recentSales } from "../../data/data"
@Component({
selector: 'app-root',
styleUrls: ['opensource-demo.css'],
encapsulation: ViewEncapsulation.None,
templateUrl: 'opensource-demo.html'
})
export class OpenSourceDemo {
rows = recentSales;
}
Откройте файл opensource-demo.html и добавьте код для включения компонента ngx-datatable:
<div class="card main-panel">
<div class="card-header">
<h1>Open Source Demo</h1>
</div>
<div class="card-body">
<div class="container-fluid">
<ngx-datatable
class="bootstrap"
[rows]="rows"
[headerHeight]="50"
rowHeight="40">
<ngx-datatable-column name="Id" prop="id"></ngx-datatable-column>
<ngx-datatable-column name="Country" prop="country"></ngx-datatable-column>
<ngx-datatable-column name="Sold By" prop="soldBy"></ngx-datatable-column>
<ngx-datatable-column name="Client" prop="client">
</ngx-datatable-column>
<ngx-datatable-column name="Description" prop="description">
</ngx-datatable-column>
<ngx-datatable-column name="Value" prop="value"></ngx-datatable-column>
<ngx-datatable-column name="Item Count" prop="itemCount"></ngx-datatable-column>
</ngx-datatable>
</div>
</div>
</div>
Отредактируйте файл app.module.ts, расположенный в папке src\app, и замените его содержимое приведенными ниже строками. Обратите внимание, как импортируется NgxDatatableModule, чтобы обеспечить нашу демонстрацию компонентами с открытым исходным кодом:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OpenSourceDemo } from './opensource-demo/opensource-demo';
// import NgxDatatable modules
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@NgModule({
declarations: [
OpenSourceDemo
],
imports: [
BrowserModule,
NgxDatatableModule
],
providers: [],
bootstrap: [OpenSourceDemo]
})
export class AppModule { }
Теперь запустите приложение:
npm start
После запуска приложения вы увидите компонент ngx-datatable, отображающий данные о продажах:
Чтобы показать некоторые функции компонента, давайте начнем настраивать нашу сетку данных с открытым исходным кодом для поддержки обновлений значений ячеек.
Реализация обновления значения ячейки
Проект ngx-datatable поддерживает обновление значений ячеек, но это не предусмотрено по умолчанию. Чтобы использовать эту функцию, вы должны выполнить несколько шагов для ее реализации.
Сначала откройте файл opensource-demo.ts и включите функцию updateValue в класс OpenSourceDemo. Компонент ngx-datatable будет вызывать эту функцию всякий раз, когда пользователь закончит редактирование значения ячейки:
export class OpenSourceDemo {
editing = {};
rows = recentSales;
updateValue(event, cell, rowIndex) {
this.editing[rowIndex + '-' + cell] = false;
this.rows[rowIndex][cell] = event.target.value;
this.rows = [...this.rows];
}
}
Измените файл opensource-demo.html, чтобы сделать столбцы Client и Description редактируемыми:
<ngx-datatable-column name="Client" prop="client">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
<span title="Double click to edit"
(dblclick)="editing[rowIndex + '-client'] = true"
*ngIf="!editing[rowIndex + '-client']"
>{{value}}
</span>
<input
autofocus
(blur)="updateValue($event, 'client', rowIndex)"
*ngIf="editing[rowIndex + '-client']"
type="text"
[value]="value"
/>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Description" prop="description">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
<span title="Double click to edit"
(dblclick)="editing[rowIndex + '-description'] = true"
*ngIf="!editing[rowIndex + '-description']"
>{{value}}
</span>
<input
autofocus
(blur)="updateValue($event, 'description', rowIndex)"
*ngIf="editing[rowIndex + '-description']"
type="text"
[value]="value"
/>
</ng-template>
</ngx-datatable-column>
Как мы видим, приведенный выше код использует обработчик события dblclick, чтобы указать ngx-datatable открыть текстовый редактор при двойном щелчке по ячейке, а обработчик события blur обновить значение ячейки, когда пользователь завершит редактирование.
Эти изменения позволяют нашему ngx-datatable обрабатывать обновления в столбцах Client и Description и сохранять их в базовом источнике данных:
Изменение или добавление нескольких строк для настройки одной таблицы данных не кажется большой проблемой. Однако, когда у вас есть разные смарт-таблицы, реализованные на многочисленных страницах в нескольких проектах, становится очевидным, что вашей организации требуется более надежное и согласованное решение.
Альтернативы настройке таблиц данных с открытым исходным кодом
Для повседневного использования компоненты интеллектуальных таблиц с открытым исходным кодом делают свою работу, и их достаточно для удовлетворения основных потребностей. Но если ваша компания разрабатывает первоклассные приложения корпоративного уровня, вам следует обратить внимание на более профессиональные продукты, которые предлагают поддержку нескольких фреймворков JavaScript и охватывают полный набор функций.
GrapeCity предоставляет несколько продуктов для таблиц данных, которые можно реализовать в приложении Angular с помощью нескольких строк кода. Эти продукты обладают богатым набором функций, которые в противном случае нам пришлось бы настраивать, как мы делали ранее с компонентом с открытым исходным кодом.
Давайте рассмотрим некоторые основные моменты различных облегченных продуктов для интеллектуальных таблиц, предоставляемых GrapeCity, включая SpreadJS, DataViewJS и Wijmo FlexGrid.
SpreadJS
SpreadJS — это самая продаваемая в мире электронная таблица JavaScript с более чем 450 функциями Excel. С помощью SpreadJS вы можете быстро предоставлять возможности работы с электронными таблицами, подобные Excel, без каких-либо зависимостей от Excel, а также с полной поддержкой React, Vue, Angular и TypeScript.
Для стандартных сценариев работы с электронными таблицами SpreadJS позволяет создавать финансовые отчеты и информационные панели, модели бюджетирования и прогнозирования, научные, инженерные, медицинские, образовательные, записные книжки для научных лабораторий и другие подобные приложения JavaScript.
Для более продвинутых вариантов использования электронных таблиц SpreadJS позволяет создавать собственные электронные таблицы, расширенные сетки, информационные панели, отчеты и формы ввода данных с помощью комплексного API. SpreadJS, оснащенный высокоскоростным вычислительным механизмом, позволяет выполнять самые сложные вычисления.
SpreadJS обеспечивает интеграцию за счет импорта и экспорта функций, которые без проблем работают с самыми требовательными электронными таблицами Excel.
DataViewJS
DataViewJS — это платформа Datagrid, ориентированная на расширенное представление данных. Он выходит за рамки традиционных табличных дисплеев и предоставляет несколько видов представления, включая дерево, карту, кладку, решетку, временную шкалу, график Ганта, календарь и сетку.
DataViewJS позволяет свободно изменять макеты с помощью одной строки кода и полностью поддерживает Angular, React и Vue.JS.
Wijmo FlexGrid
FlexGrid является частью семейства продуктов Wijmo, включая компоненты пользовательского интерфейса JavaScript/HTML5, такие как FlexChart, Input, PivotChart, FinancialChart, ReportViewer и другие. FlexGrid полностью поддерживает Angular, AngularJS, ReactJS, VueJS и Knockout.
Молниеносная скорость и расширяемость делают Wijmo FlexGrid идеальной интеллектуальной сеткой данных JavaScript. Небольшие размеры FlexGrid повышают производительность и сокращают время загрузки, сохраняя компактность веб-приложений.
Вы можете воспользоваться функциями FlexGrid, подобными Excel, такими как агрегация данных, объединение ячеек, определение размера по звездам и замораживание ячеек. Кроме того, шаблоны ячеек предоставляют неограниченное количество шаблонов с поддержкой декларативной разметки и выражений привязки.
Каждый из этих продуктов GrapeCity легкий и работает с виртуализацией, что означает, что они продолжают работать с высокой производительностью даже при подключении к массивным источникам данных.
Умная таблица данных Angular с Wijmo FlexGrid
Давайте продемонстрируем, как реализовать интеллектуальную таблицу данных Wijmo FlexGrid в том же приложении Node.JS, которое мы создали ранее.
Сначала установите пакет Wijmo с помощью npm:
npm install @grapecity/wijmo.angular2.allДобавьте новую папку flexgrid-demo в папку приложения и создайте три новых файла с именами flexgrid-demo.css, flexgrid-demo.html и flexgrid-demo.ts:
/my-app
/src
/app
/flexgrid-demo
flexgrid-demo.css
flexgrid-demo.html
flexgrid-demo.ts
Откройте файл flexgrid-demo.ts и добавьте следующие строки, чтобы импортировать модули Wijmo FlexGrid и экспортировать наш компонент FlexGridDemo:
import { Component, NgModule, ViewChild, ViewEncapsulation } from '@angular/core';
// import Wijmo components
import * as wjcCore from '@grapecity/wijmo';
import * as wjcGrid from '@grapecity/wijmo.grid';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { recentSales } from "../../data/data"
@Component({
selector: 'app-root',
templateUrl: 'flexgrid-demo.html',
styleUrls: ['flexgrid-demo.css'],
encapsulation: ViewEncapsulation.None
})
export class FlexGridDemo {
sales: any[];
// references FlexGrid named 'flex' in the view
@ViewChild('flex') flex: wjcGrid.FlexGrid;
// DataSvc will be passed by derived classes
constructor() {
this.sales = recentSales;
}
}
Откройте flexgrid-demo.html и добавьте приведенный ниже код для реализации компонентов wj-flex-grid и wj-flex-grid-column:
<div class="card main-panel">
<div class="card-header">
<h1>Wijmo FlexGrid Demo</h1>
</div>
<div class="card-body">
<div class="container-fluid">
<wj-flex-grid #flex
[itemsSource]="sales">
<wj-flex-grid-column [header]="'ID'" [binding]="'id'" [width]="50"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Client'" [binding]="'client'" [width]="150"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Description'" [binding]="'description'" [width]="320"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Value'" format="n2" [binding]="'value'" [width]="100"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Quantity'" format="n0" [binding]="'itemCount'" [width]="100"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Sold By'" [binding]="'soldBy'" [width]="100"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Country'" [binding]="'country'" [width]="100"></wj-flex-grid-column>
</wj-flex-grid>
</div>
</div>
</div>
Измените файл app.module.ts, чтобы импортировать и ссылаться на наш новый компонент FlexGridDemo:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OpenSourceDemo } from './opensource-demo/opensource-demo';
import { FlexGridDemo } from './flexgrid-demo/flexgrid-demo';
// import NgxDatatable modules
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
// import Wijmo modules
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
// apply Wijmo license key
import { setLicenseKey } from '@grapecity/wijmo';
setLicenseKey('your license key goes here');
@NgModule({
declarations: [
OpenSourceDemo,
FlexGridDemo
],
imports: [
BrowserModule,
WjGridModule,
NgxDatatableModule
],
providers: [],
// bootstrap: [OpenSourceDemo]
bootstrap: [FlexGridDemo]
})
export class AppModule { }
Откройте файл opensource-demo.css и добавьте импорт ниже. Это применит таблицы стилей, требуемые компонентом FlexGrid:
@import "@grapecity/wijmo.styles/wijmo.css"; @import 'bootstrap/dist/css/bootstrap.css';
Теперь запустите приложение:
npm start
После запуска приложения вы увидите компонент FlexGrid, отображающий данные о продажах:
Редактирование значений ячеек сетки с помощью FlexGrid
Редактирование ячеек — это стандартная функция FlexGrid. Вы можете дважды щелкнуть ячейки и начать редактирование на месте:
По умолчанию FlexGridColumn доступен для редактирования. Но вы можете отключить редактирование, явно определив свойство isReadOnly в компоненте FlexGridColumn:
<wj-flex-grid-column [header]="'ID'" [binding]="'id'" [width]="50" [isReadOnly]="true"> </wj-flex-grid-column>
Сортировка строк с помощью FlexGrid
По умолчанию каждый столбец FlexGrid можно сортировать по возрастанию или убыванию.
Вы можете заблокировать сортировку столбцов, установив для свойства allowSorting значение false:
<wj-flex-grid-column [header]="'Client'" [binding]="'client'" [width]="150" [allowSorting]="false"></wj-flex-grid-column>
Изменение порядка столбцов с помощью FlexGrid
FlexGrid поставляется с возможностью свободно перемещать столбцы из коробки:
Опять же, вы можете отключить переупорядочивание столбцов, установив для свойства allowDragging значение false:
<wj-flex-grid-column [header]="'Client'" [binding]="'client'" [width]="150" [allowDragging]="false"> </wj-flex-grid-column>
Импорт данных Excel с помощью FlexGrid
Давайте посмотрим, как импортировать данные Excel в наш компонент FlexGrid.
Во-первых, добавьте следующий сегмент HTML после элемента div card-body в функции рендеринга:
<div className="card-body">
<div class="card-footer">
<div class="input-group">
<div class="custom-file">
<input type="file" id="importFile"/>
</div>
<div class="input-group-prepend">
<input type="button" value="Import"/>
</div>
</div>
</div>
Запустите приложение и обратите внимание на раздел импорта внизу страницы:
Теперь мы должны указать кнопке Import импортировать файл в наш компонент FlexGrid. Добавьте функцию onClick к элементу ввода и передайте имя функции как «load»:
<input type="button" value="Import" (click)="load()"/>
Затем добавьте новую функцию загрузки внутри класса компонента в файле flexgrid-demo.ts. Здесь мы сначала получим полный путь к выбранному пользователем файлу:
load() {
let fileInput = <HTMLInputElement>document.getElementById('importFile');
if (fileInput.files[0]) {
}
}
Теперь добавьте директиву импорта в библиотеки Wijmo, которая будет обрабатывать функции Excel, которые мы хотим реализовать:
import * as wjcXlsx from '@grapecity/wijmo.xlsx'; import * as wjcGridXlsx from '@grapecity/wijmo.grid.xlsx';
Вернемся к функции загрузки, добавим вызов функции loadAsync библиотеки Wijmo, чтобы загрузить содержимое файла во FlexGrid:
load() {
let fileInput = <HTMLInputElement>document.getElementById('importFile');
if (fileInput.files[0]) {
wjcGridXlsx.FlexGridXlsxConverter.loadAsync(this.flex, fileInput.files[0], { includeColumnHeaders: true });
}
}
Перезапустите приложение и проверьте функцию импорта.
npm start
Откройте Excel и создайте новый файл Demo.xlsx со следующим содержимым:
Вернитесь в наше приложение Angular, нажмите Выбрать файл, выберите Demo.xlsx и нажмите Импорт, чтобы увидеть результат:
Экспорт данных сетки в Excel с помощью FlexGrid
Наконец, давайте посмотрим, что необходимо для экспорта данных из нашей FlexGrid в Excel.
Сначала добавьте следующий фрагмент HTML после кода кнопки «Импорт», чтобы добавить новую кнопку «Экспорт»:
<div class="input-group-append"> <input type="button" value="Export" (click)="save()"/> </div>
Обратите внимание, что обработчик события click указывает на функцию сохранения. Давайте реализуем эту функцию внутри класса компонента:
save() {
}
Чтобы экспортировать данные FlexGrid в файл Excel, нам нужно вызвать функцию saveAsync класса FlexGridXlsxConverter:
save() {
wjcGridXlsx.FlexGridXlsxConverter.saveAsync(this.flex,
{
includeColumnHeaders: true,
includeCellStyles: false,
formatItem: null
},
'FlexGrid.xlsx');
}
Запустите приложение еще раз и проверьте кнопку экспорта:
Теперь вы можете открыть файл Excel, экспортированный компонентом FlexGrid:
Эта демонстрация едва затрагивает поверхность компонента FlexGrid. Вы можете изучить Страницу GrapeCity для семейства Wijmo компонентов и инструментов пользовательского интерфейса JavaScript, чтобы найти полную документацию, демонстрации и примеры, написанные для Angular, React и Vue.
Подведение итогов
Вы можете создавать и использовать интеллектуальные таблицы данных на основе Angular различными способами. Angular — это богатая среда JavaScript, которая относительно сложнее, чем конкурирующие библиотеки JavaScript, поэтому некоторые подходы требуют гораздо больше ручной работы, чем другие. Тем не менее, вы не сможете заметить разницу, пока не потратите драгоценное время на их настройку.
Существует множество бесплатных библиотек таблиц с открытым исходным кодом, которые подходят для повседневных нужд. Мы видели, как реализовать один из них в этой статье. Однако когда дело доходит до деловых и корпоративных проектов, вы не хотите отвлекать разработчиков и тратить их время на разработку обходных путей, дополнительных функций или конфигурации. Вот почему набор компонентов коммерческой библиотеки, такой как Wijmo, обеспечивает надежную окупаемость инвестиций.
Построенный так, чтобы быть независимым от фреймворка, Wijmo включает полную поддержку Angular, AngularJS, ReactJS и VueJS с одинаковой сеткой для разных фреймворков. Эта согласованность между различными библиотеками означает свободу выбора и возможность сэкономить время и усилия по разработке, если ваша организация решит перейти на другую среду JavaScript.
Первоначально опубликовано на https://www.grapecity.com 27 сентября 2022 г.
