В настоящее время на рынке существует большое количество элементов управления таблицей данных JavaScript, в том числе сторонние и проданные и проданные с открытым исходным кодом. Можно сказать, что FlexGrid Wijmo является лучшим контролем таблицы, в настоящее время адаптированным для Angular 2.
Angular 2 Таблица данных Основные требования: меньше, быстрее и более знакомого.
Чтобы использовать Angular 2 Forms, сначала вам нужно понять основные требования форм. FlexGrid начался в 1996 году, когда элементы управления, написанные для Visual Basic, использовались в C ++. За эти годы он развивался и был усовершенствован на нескольких платформах, особенно на платформе JavaScript. FlexGrid назван из -за концепции Flex, а элементы управления должны содержать наиболее необходимые наборы ключевых функций и масштабируемые возможности. Встроенные основные функции, такие как: сортировка, группировка, редактирование и другие причудливые вещи, могут быть предоставлены посредством дополнительных расширений. Это будет держать управление оптимизированными и эффективными, предоставив клиентам возможность глубоко настроить.
Другим важным показателем является производительность. FlexGrid постоянно сравнивает с другими продуктами, чтобы убедиться, что мы достаточно быстрые. Концепция Flex делает наши файлы достаточно маленькими (около 25 тыс. После сжатия), и у нас нет зависимости от других структур. Наиболее значительным улучшением производительности является виртуальное рендеринг. FlexGrid виртуализирует все DOM, рисуя только ячейки, которые должны быть заполнены Viewports (и некоторыми буферами для плавного прокрутки) за раз. Когда таблица прокручивается, клетки (элементы DOM) переработаны. Виртуальный рендеринг означает, что сетка может связывать миллионы данных за 1 секунду.
Наконец, одной из самых важных функций являются знакомые операции. FlexGrid основан на всех поведениях взаимодействия в Excel, что может быть наиболее часто используемым способом для пользователей для работы сетки. Люди хотят получить определенное поведение при прокрутке, нажав, особенно при использовании команд клавиатуры (включая функции буфера обмена), а не изобретать себя. Мы подражали Excel, чтобы пользователи чувствовали себя комфортно, используя наши таблицы, и, на удивление, многие другие сети изобрели свое собственное поведение или не полностью поддерживают прокрутку и поведение клавиатуры. Например, когда вы выбираете строку данных и удерживаете стрелку вниз, многие таблицы не будут показывать ожидаемое поведение.
Используйте язык разметки, чтобы объявить управление пользовательским интерфейсом
Теперь давайте посмотрим на преимущества FlexGrid под AngularJS. Самым большим преимуществом в AngularJS является язык разметки FlexGrid: угловые компоненты дают возможность объявлять элементы управления с использованием языка наценки. Маркеры декларации хорошо следуют за шаблоном проектирования MVVM, и мы можем полностью настроить наши компоненты с помощью языка разметки).
FlexGrid поддерживает использование углового языка разметки, чтобы объявить полный API. Вы можете использовать язык разметки, чтобы установить свойства, прикрепить события и настройку подкомпонентов (например, столбцы).
Вот пример, который демонстрирует, как настроить FlexGrid с использованием языка наценки Angular2.
<WJ-Flex-Grid [itemsSource] = "data"> <wj-flex-grid-column [header] = "'' Country '" [связывание] = "' 'Country'" [width] = "'*'"> </wj-flex-grid-column> <wj-flex-grid-column [header] = "'date' 'griding] ="' дата '> </wj-flex-column grid-gr <wj-flex-grid-column [header] = "'' enforme '" [inbling] = "' out '" [format] = "' n0 '"> </wj-flex-grid-column> <wj-flex-grid-column [Header] = "' Active '" [Binding] = "' Active '> </wj-flex-grid-column> </wj-flex>
Вот результаты, которые мы получили от языка разметки, который мы объявили.
Многие другие компоненты сетки предоставляют только возможность объявлять элемент управления с помощью языка разметки, что приводит к всем конфигурациям, которые должны быть выполнены с использованием JavaScript (ViewModel). Это делает представление и просмотр путаницы, заставляя разработчиков использовать JavaScript для изменения пользовательского интерфейса управления. При этом вы будете скучать по всем преимуществам углового связывания. Мы думаем, что это анти-паттерн. Смотрите разницу ниже:
<ag-grid-ng2 #aggrid // элементы, связанные с свойствами на контроллере [Gridoptions] = "Gridoptions" [columndefs] = "columndefs"> </ag-grid-ng2>
Используя компоненты, которые полностью поддерживают языки разметки, вы можете получить полную поддержку моделей MVVM и создавать приложения, такие как другие платформы разработки (ASP.NET, Java, Silverlight, Flex).
Объявить шаблоны типа повторного использования
Чтобы объявить любых участников FlexGrid, используя язык разметки, мы также предоставляем шаблоны ячеек. Шаблоны клеток - это способ объявить шаблоны повторно используемых для разных типов ячеек. Шаблоны ячеек поддерживают любые действительные угловые метки, включая связанные выражения, HTML и другие компоненты. Типы шаблонов ячейки включают в себя: титульную ячейку, ячейку редактирования, ячейка нормальной моды и т. Д.
Через шаблоны ячеек FlexGrid предоставляет представление для создания компонентов. Вы можете не только объявить FlexGrid на языке разметки, но и использовать весь угловой синтаксис в каждой ячейке. Давайте посмотрим, насколько мощный таг шаблона ячейки FlexGrid.
<WJ-Flex-Grid [itemsSource] = "data1" [Allsorting] = "false" [deferResizing] = "true"> <template wjflexgridcelltemplate [celltype] = "'' topleft '" *ngif = "customtopleftft"> № </template> <template wjflexgridcellteptteptate "> № </template> <template wjflexgridcellateptateptteptfteftftftftf *ngif = "CustomRowheader" #cell = "cell"> {{cell.Row.Index}} </template> <wj-flex-grid-column header = "country" binding = "country"> <Template wjflexgridcelltemptement [celltype] = "'cell'" *ngif = "customcell" #item = "item =" itep " {item.country}}. Png " /> {{item.country}} < /template> <Template wjflexgridcelltemplate [celltype] =" '' groupheader '" *ngif =" customgroupheader " #item =" # #cell = "cell"> <input type = "checkbox" [(ngmodel)] = "cell.row.iscollapsed"/> {{item.name}} ({{item.items.length}} elect wjflexgridcelltemplate [celltype] = "'' columnheader '" *ngif = "customcolumnheader"> <input type = "fackbox" [(ngmodel)] = "uictx.highlightdownloads" /> Загрузки < /tempate> <Template wjflexgridcelltemptate [celltype] = "Cell -" "Cellpe" = "" Celltype "="' "Celltype] =" Cell -'"" CellType] "" CellType "=" CellType "=" Cell -"=" Cell -"=" Cell -"=" Cell -"=" Cell -"=" Cell -"=" Cell -". #item = "item"> <span [ngstyle] = "{color: uictx.highlightDownloads? (item.downloads> 10000? [celltype] = "'group'" *ngif = "customgroup" #cell = "cell"> sum = {{cell.value | Номер: '1.0-0'}} </template> </wj-flex-grid-column> </wj-flex-grid>Результаты, которые мы объявили как шаблоны ячейки
Повторные шаблоны клеток в Angular2
Опять же, чтобы достичь этого эффекта в других элементах управления таблицами, вам необходимо отредактировать файл JavaScript и написать его в ViewModel.
Автоматически обновлять элементы управления с использованием привязки данных.
Я считаю, что наиболее продуктивным преимуществом Angular является выражение привязки, которое позволяет управлять, которые мы создаем, автоматически реагировать на изменения данных, освобождая нас от утомительных обработчиков событий и операций DOM.
Все свойства привязки данных FlexGrid. Кроме того, мы также предоставляем двустороннее связывание для некоторых свойств, которые требуют двустороннего связывания данных. Без написания какого -либо кода вы можете привязать компоненты для обработки событий и взаимодействовать с данными модели.
Привлечение данных является первоклассным гражданином на любой платформе разработки (Java, .net) и Angular делает его проще и поддерживает как одностороннее, так и двустороннее связывание данных.
ТИЗКИКА: 2 дня работы с углованием.
FlexGrid и все элементы управления Wijmo записаны в TypeScript. У нас довольно долгая история, работающая на платформе Microsoft, поэтому, когда TypeScript становится зрелым, у нас есть чувство дома. TypeScript дает нам опыт, аналогичный написанию C#: классы, наследование, сильная набор печати, проверку типов, проверку ошибок времени сборки и многое другое. Для нас является катализатор для создания элементов управления JavaScript, как и на других платформах, нам не нужно идти на компромиссы в API или синтаксисе.
Возможно, самое главное, TypeScript дает нам возможность создавать реальные элементы управления вместо виджетов. FlexGrid как класс наследует от нашего базового класса управления. Когда виджеты заставляют вас установить значения атрибута и передавать значения, используя смущающие функции, FlexGrid имеет аксессов Getter и Setter, которые вы можете установить напрямую. Wijmo также включает модель события для простого добавления обработчиков.
Если наши пользователи решили использовать TPYSCRIPT для разработки, они получат интеллектуальные подсказки и предупреждения в поддерживаемых IDE, и будут сообщения об ошибках, когда они попытаются назначить неверный тип атрибуту.
Наиболее привлекательной особенностью TypeScript является то, что наши клиенты могут наследовать и расширять наши элементы управления, что соответствует нашей философии Flex, упрощающей настройку управления и уменьшает ошибки.
Наконец, мы идем рука об руку с Angular2. Я был удивлен, увидев решение, которое мы приняли несколько лет назад, используя язык Microsoft. Наш класс управления уже использует TypeScript, поэтому он может быть легко сочетается с Angular2. Мы просто расширили их и добавили метаданные, чтобы выставить их в компонентах Angular2.
Не верьте своим односторонним словам: попробуйте тоже
«Мы купили Wijmo, и их команда проделали отличную работу: красивый интерфейс; вдумчивая архитектура; хорошо разработанная документация; не отставая от меняющихся технологий»,-сказал Б.Дж. Джеонг из Cisco.
Если мой текст не убедит вас, поощряйте вас попробовать FlexGrid и доказать меня правильно или неправильно. Если я ошибаюсь, и FlexGrid избит другим управлением сеткой, вы можете сказать мне. Мы никогда не переставали развиваться и улучшать в течение 20 лет, и мы никогда не остановимся. Скачать сейчас, чтобы испытать это.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.