Блог

Работа с вложенными данными в Webix UI

Всем нравится пользоваться простыми приложениями с интуитивно понятным интерфейсом. Pецепт такого приложения прост: возьмите немного HTML-тегов, добавьте подходящий фреймворк, например, Bootstrap, и ваше приложение готово. В повседневной разработке все происходит немного по-другому. Бизнес-приложения работают со сложными данными, поэтому для их представления требуется более продвинутый интерфейс. Одним из таких кейсов является использование вложенных данных. Готового решения для отображения в HTML или Bootstrap пока нет. Но решить проблему можно с помощью Webix UI.

Tree

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

webix.ui({
view: "tree", data: nested_data
});

Webix-Tree

Grouplist

Grouplist очень похож на Tree по функциональности. Он отображает те же данные, но в другом виде. Этот виджет стал популярен после расцвета мобильного веба. Ограничения в размере экранов мобильных устройств и слишком мелкие для тач-действий активные элементы дерева стали причиной замены tree на grouplist в большинстве мобильных устройств. API и формат данных для Grouplist похожи на API и формат данных Tree, поэтому вы можете заменить одно view на другое не изменяя логику приложения.

webix.ui({
view: "grouplist", data: nested_data
});
Webix-GroupList

TreeTable

Tree — отличный компонент, но он не слишком информативный. По умолчанию одна запись в дереве отображает только одно свойство. Используя темплейт, можно разместить больше информации в одном элементе, но все равно количество информации, которое можно показать, ограниченно. Тут на помощь приходит TreeTable. Он не только обладает полным набором функций Tree, но и способен отображать данные сразу в несколько столбцов.

webix.ui({
view: "treetable", columns:[
{ id:"id", header:"ID", width:40 },
{ id:"value", header:"Name", width:300,
template:"{common.treetable()}#value#"
},
{ id:"details", header:"Comments", fillspace:true },
],
data: nested_data
});
Webix TreeTable

Subviews в DataTable

Сейчас, благодаря TreeTable, у нас есть решение, которое позволяет отрисовывать вложенные данные в большом количестве столбцов. Все работает отлично, кроме одного момента. В случае с TreeTable, на каждом уровне данные одинаковые. В реальных приложениях данные на разных уровнях могут отличаться (например, на верхнем уровне могут размещаться магазины, на втором — категории, а на третьем — продукты). К счастью, у Webix есть решение. Начиная с версии Webix 3.0, вы можете использовать в DataTable Subviews. А именно, задать для каждого уровня различные таблицы с данными. Как в нашем примере:

webix.ui({
view:"datatable",
subview:{
view:"datatable",
columns:[
{ id:"Outlet", sort:"string", fillspace:true },
{ id:"January" },
{ id:"February" },
{ id:"March" }
],
},
columns:[
{ id:"title",   header:"Title", sort:"string",
template:"{common.subrow()} #title#", width:220 },
{ id:"employees", header:"Employees", fillspace:true }
]
});
SubViews-in-DataTable

 

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

Добавление нового измерения

Для более сложных данных виджетов нет. Тем не менее, вы можете создать такой виджет сами. Это еще одно преимущество использования библиотеки Webix. В вашем распоряжении находится набор строительных блоков. Если дефолтных виджетов вам недостаточно, вы можете легко создать новый виджет из имеющихся блоков. Давайте предположим, что в дополнение к комплексным иерархическим данным у нас есть второй набор вложенных данных (каждый магазин имеет список категорий + список работников). Чтобы реализовать эту задачу в интерфейсе, мы можем добавить кнопку в DataTable и создать отдельный pop-up, который будет использоваться для отображения работников.

dimension-adding

 

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

Где предел?

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

Автор
The following two tabs change content below.

Maksim Kozhukh

Основные инструменты – Javascript, HTML и CSS. В детстве был благовоспитанным мальчиком, но начал программировать калькуляторы, контроллеры, компьютеры, связался с программистами и покатился…
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit