Вы можете сделать это с помощью сетки данных JavaScript?

Эта статья была любезно поддержана нашими дорогими друзьями из Progress Kendo UI, которые стремятся предоставить разработчикам инструменты, необходимые им для использования и освоения технологической эволюции, формирующей наше общество и мир. Спасибо!

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

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

Еще одна особенность этих библиотек — плохой пользовательский опыт. Они часто не могут реализовать адаптивный дизайн для разных размеров и ориентаций экрана, не могут заблокировать или сделать части сетки липкими, а о доступности забывают. Кроме того, они обеспечивают редактирование только в формах, отдельных от сетки, что часто требует выполнения нескольких действий. Это может быть утомительно и повторяться, особенно при редактировании большого количества элементов данных. Другие даже не предлагают редактирования. Вдобавок к этому, им, как правило, не хватает функций экспорта данных, и пользователи вынуждены полагаться на печать веб-страниц для экспорта.

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

Чтобы решить эти проблемы, вам придется использовать библиотеку, которая не только построена так, чтобы быть нативной, но также включает в себя ряд дополнительных компонентов и ориентирована на удобство работы с пользователем и производительность. Чтобы продемонстрировать особенности идеальной сетки данных, мы будем использовать сетки данных Kendo UI в качестве примера. Эти сетки данных являются одним из более чем 100 компонентов, доступных в комплекте библиотек под названием Progress Kendo UI. Пакет состоит из четырех библиотек компонентов, изначально созданных для нескольких интерфейсных фреймворков. Это Kendo UI для Angular, KendoReact, Kendo UI для Vue и Kendo UI для jQuery. В примерах, приведенных в этой части, будут представлены сетки из всех четырех этих библиотек.

Отзывчивый дизайн

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

Современные таблицы данных должны реагировать на изменения ориентации и хорошо отображать все данные на экранах всех размеров. Например, сетки данных пользовательского интерфейса Kendo регулируют свой размер в зависимости от размера окна просмотра и количества строк, которые он вмещает. Например, в Angular Grid вы можете установить его высоту, и сетка станет прокручиваемой, если какое-то ее содержимое не помещается. Установка высоты включает только указание значения свойства CSS высоты сетки и обеспечение того, чтобы родительский элемент также имел заданную высоту. Никакой другой конфигурации не требуется. Вы можете увидеть, как это делается, в этой типовой таблице запасов здесь.

Кроме того, вы можете переключать видимость столбцов в сетке, при этом отображая все необходимые данные. Это достигается путем создания разных столбцов для разных диапазонов размеров экрана и использования свойства media в столбце, чтобы решить, где их показывать. Например, в этой таблице данных Angular для больших размеров экрана ( media="(min-width: 450px)" ) столбцы полностью отображаются и выглядят так.

Однако вы можете скрыть столбцы с ценой, наличием на складе и снятием с производства на средних дисплеях ( media="(min-width: 680px)" ). Это должно выглядеть так:

На небольших дисплеях ( media="(max-width: 450px)" ) вы можете создать один настраиваемый столбец для отображения всех данных, подобных этому:

Kendo UI Data Grids также поддерживает идентификаторы устройств Bootstrap 4, такие как xs, sm, md, lg и xl . Хотя это проще в использовании, это не так универсально, поскольку ограничивает количество запросов, которые вы можете включить, до одного. Например, с вашими собственными контрольными точками у вас может быть что-то вроде media="(min-width: 500px) and (max-width: 1200px)" . Объединение нескольких идентификаторов невозможно с идентификаторами устройств Bootstrap 4.

Соответствие доступности

Обеспечение того, чтобы ваша сеть соответствовала современным стандартам доступности, должно быть приоритетом. Это гарантирует, что люди с ограниченными возможностями смогут взаимодействовать с вашей сетью, и гарантирует справедливость среди ваших пользователей. Тем не менее, некоторые библиотеки ничего не делают для обеспечения доступности своих сеток. Другие делают только самый минимум, что приводит к нестандартным сеткам при оценке доступности. Чтобы сделать эти сетки доступными, нужно приложить немало усилий. Это еще более усложняется более сложной конструкцией сетки. Хотя эта работа окупится позже для вас и ваших пользователей, эти библиотеки должны были сделать доступность основной частью своих продуктов.

Сетки данных пользовательского интерфейса Kendo отдают ему приоритет, поддерживая основные стандарты доступности, такие как WAI-ARIA, Section 508 и WCAG 2.1. Например, KendoReact следует стандарту Раздела 508, гарантируя, что большинство его компонентов полностью доступны и поддерживают навигацию с помощью клавиатуры. Он следует руководству WCAG по доступности клавиатуры, делая сетку и все ее встроенные компоненты управляемыми с клавиатуры. В результате React Grid достигает наивысшего уровня соответствия WCAG AAA. Будучи веб-компонентом, KendoReact Data Grid соответствует спецификации WAI-RAI, чтобы пользователи с ограниченными возможностями могли адекватно взаимодействовать с ним на веб-страницах. Например, в этой сетке данных React вы можете перемещаться по различным компонентам и строкам с помощью клавиатуры.

Виртуальная прокрутка

При виртуальной прокрутке в сетке отображается только сегмент данных. Обычно это задается как количество записей для выборки. Когда пользователь прокручивает этот сегмент, отображается другой сегмент того же размера. Это повышает производительность, поскольку рендеринг большого набора данных занимает много памяти и снижает производительность и скорость вашей сетки. Виртуальная прокрутка создает иллюзию рендеринга всех данных без каких-либо последствий для производительности.

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

Пользовательский интерфейс Kendo поддерживает виртуальную прокрутку как для локальных, так и для удаленных данных. Например, в пользовательском интерфейсе Kendo для jQuery Grid вы включаете его, присваивая свойству scrollable.virtual сетки значение true. Установив это, сетка загружает только количество элементов, указанное в pageSize источника данных сетки. Вы можете увидеть, как это работает, в этой сетке данных jQuery, которая использует локальные данные.

 <!DOCTYPE html> <html> <head>...</head> <body> ... <div></div> <script> var dataSource = new kendo.data.DataSource({ pageSize: 20, ... }); $("#grid").kendoGrid({ dataSource: dataSource, scrollable: { virtual: true }, ... }); </script> </body> </html>

Этот же параметр будет работать для удаленных данных, как показано в этой таблице данных jQuery. Кроме того, вы можете использовать аналогичный параметр для виртуализации столбцов сетки, если записи содержат несколько свойств, одновременная визуализация которых может быть дорогостоящей. Для свойства scrollable.virtual должно быть установлено значение true. Однако виртуализация столбцов не зависит от свойства pageSize . Этот пример демонстрирует эту функцию.

Экспорт PDF и Excel

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

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

Сетки данных пользовательского интерфейса Kendo обеспечивают экспорт данных из сетки в двух форматах: PDF и Excel. Например, в пользовательском интерфейсе Kendo для Vue Data Grid для обработки экспорта PDF вы должны использовать компонент GridPDFExport . С помощью метода save вы передаете данные, которые хотите включить в экспорт PDF. Данные могут быть разбиты на страницы или полный набор.

 <template> <button @click="exportPDF">Export PDF</button> <pdfexport ref="gridPdfExport"> <Grid :data-items="items"></Grid> </pdfexport> </template> <script> import { GridPdfExport } from '@progress/kendo-vue-pdf'; import { Grid } from '@progress/kendo-vue-grid'; export default { components: { 'Grid': Grid, 'pdfexport': GridPdfExport }, data: function () { return { products: [], ... }; }, methods: { exportPDF: function() { (this.$refs.gridPdfExport).save(this.products); }, ... }, ... }; </script>

Компонент GridPDFExport позволяет указать размеры страницы для экспорта, поля страницы, способ масштабирования сетки на странице и т. д. Это полезно для настройки больших сеток, чтобы они соответствовали страницам PDF. Вы должны передать их как свойства компоненту. Вот пример:

 <pdfexport ref="exportPDF" :margin="'2cm'" :paper-size="'a4'" :scale="0.5"> <Grid :data-items="products"></Grid> </pdfexport>

Вы можете дополнительно настроить экспорт с помощью шаблона. Внутри шаблона вы можете добавить стили, указать верхние и нижние колонтитулы, изменить макет страницы и добавить на нее новые элементы. Вы бы использовали CSS для стилизации. Когда вы закончите настройку шаблона, вы должны указать его с помощью свойства page-template компонента GridPDFExport.

Чтобы экспортировать файлы Excel из Kendo UI Vue Grid, вы должны использовать компонент ExcelExport . С его методом saveExcel вы передаете ему имя файла, данные сетки, отображаемые столбцы и т. д. и вызываете метод для создания файла. Эта сетка данных Vue — отличный пример того, как вы можете экспортировать Excel с помощью Kendo UI Vue Grid.

Прикрепленные столбцы

Когда пользователь прокручивает сетку по горизонтали, ему может потребоваться, чтобы некоторые столбцы были заморожены или постоянно находились в поле зрения. Эти столбцы обычно содержат важную информацию, такую ​​как идентификаторы, имена и т. д. Закрепленные/прикрепленные столбцы всегда остаются видимыми, но могут перемещаться либо к левому, либо к правому краю сетки в зависимости от направления прокрутки или вообще не перемещаться. Например, в этой демонстрации сетки данных Vue идентификатор заморожен, а столбец Discontinued закреплен.

Липкие столбцы в грид-библиотеках могут быть редким явлением. Если его нет, реализовать его с нуля может быть трудной задачей. Для его выполнения потребуется значительная стилизация, и он может плохо масштабироваться, если вам нужно множество сеток.

Настройка закрепленных столбцов в пользовательском интерфейсе Kendo требует минимальной настройки. Например, в Kendo UI Vue Grid вам нужно установить для свойства locked столбца значение true, чтобы сделать его липким. В этой таблице данных Vue столбцы ID и Discontinued прикрепляются путем установки свойства locked . В приведенном ниже примере идентификатор и возраст заблокированы.

 <template> <grid :data-items="people" :columns = "columns"> </grid> </template> <script> import { Grid } from '@progress/kendo-vue-grid'; import { people } from './people' export default { components: { 'grid': Grid }, data: function () { return { people: this.getPeople(), columns: [ { field: 'ID', title: 'ID', locked: true}, { field: 'FirstName', title: 'FirstName' }, { field: 'LastName', title: 'LastName' }, { field: 'Age', title: 'Age', locked: true}, ] }; }, methods: { getPeople() { return people; } } }; </script>

Редактирование

Основным вариантом использования сетки является просмотр больших объемов данных. Некоторые библиотеки просто придерживаются этого и не рассматривают возможность необходимости редактирования. Это ставит пользователей в невыгодное положение, поскольку редактирование — довольно полезная функция. Когда пользователи запрашивают это, разработчики вынуждены создавать отдельную страницу для редактирования отдельных записей. Чтобы добавить к этому, пользователи могут редактировать только одну запись за другой в одной форме. Это утомительно и ухудшает работу пользователя, особенно при обработке больших объемов данных.

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

Kendo UI Data Grids позволяет редактировать в двух формах: встроенной и с использованием всплывающих окон. При встроенном редактировании все данные редактируются в сетке. При нажатии на ячейку она становится редактируемой. Во всплывающем окне всплывающая форма используется для редактирования каждой записи по отдельности. В этом примере пользовательского интерфейса Kendo для таблицы jQuery создание редактируемой сетки включает три шага: установка редактируемой конфигурации сетки, установка источника данных и настройка операций CRUD для источника данных. Эти несколько шагов упрощают настройку пакетного редактирования. Настройка редактирования всплывающих окон выполняется по тем же шагам, но с другими параметрами в начале.

В дополнение к поддержке редактирования пользовательский интерфейс Kendo для jQuery Grid обеспечивает проверку ввода. Например, вы можете сделать ввод обязательным или установить минимальную длину. Кроме того, вы можете создавать собственные элементы управления вводом. Элементы управления вводом не ограничиваются только текстовыми полями. Вы можете использовать раскрывающиеся списки, флажки, средства выбора даты, ползунки диапазона и т. д. Они могут быть как встроенными, так и всплывающими. В этой таблице данных jQuery поле «Категория» представляет собой раскрывающийся список. Валидация также демонстрируется в том же примере. В поле цены за единицу введена проверка, гарантирующая, что его наименьшее значение равно 1.

Дополнительные компоненты

Большинство библиотек сеток имеют единственную цель: предоставить сетку. Ни с чем больше не поставляются, только сеткой. Вы ограничены функциями, которые он предоставляет. Если вам нужно дополнить сетку, это может быть сложно, потому что другие библиотеки могут быть несовместимы с ней. Так что вам просто нужно придерживаться границ библиотеки при построении сетки.

Пользовательский интерфейс Kendo решает эту проблему, потому что подход его создателя заключается в том, чтобы предложить обширную библиотеку компонентов, которые легко интегрируются друг с другом, а не отдельные компоненты. Сетка является частью библиотеки многочисленных компонентов, которые позволяют вам делать все, от управления данными, навигации, построения диаграмм, редактирования, представления мультимедиа, облегчения чата и так далее. Вы можете встроить эти компоненты в сетку, не выполняя сложной настройки и, возможно, не нарушая ее. Их интеграция не вызывает затруднений и требует минимальной настройки. Возьмем, к примеру, эту таблицу данных Angular, ее столбец «1 день» легко встраивает полностью интерактивную диаграмму для каждой строки. Вы можете встроить любое количество компонентов в сетку, полагая, что она будет работать и все ее функции будут выполняться должным образом.

Заключение

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

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

Таблицы данных должны раскрывать, что пользователь может делать с данными. Этого можно достичь путем редактирования и облегчения экспорта в несколько форматов. Кроме того, эти библиотеки должны поставляться с другими компонентами, дополняющими сетку. Наличие совместимых компонентов в одной библиотеке избавляет от необходимости использовать несколько разных конфликтующих библиотек в одном приложении. Библиотека сетки данных, которая предоставляет эти функции, поможет вам создать отличный продукт для ваших пользователей без особых сложностей.