Всем нравится пользоваться простыми приложениями с интуитивно понятным интерфейсом. Pецепт такого приложения прост: возьмите немного HTML-тегов, добавьте подходящий фреймворк, например, Bootstrap, и ваше приложение готово. В повседневной разработке все происходит немного по-другому. Бизнес-приложения работают со сложными данными, поэтому для их представления требуется более продвинутый интерфейс. Одним из таких кейсов является использование вложенных данных. Готового решения для отображения в HTML или Bootstrap пока нет. Но решить проблему можно с помощью Webix UI.
Tree
Простейший виджет, который можно использовать для отрисовки вложенных данных — это Tree. Этот элемент интерфейса, который довольно часто используется в десктопных приложениях, но редко встречается в веб-версиях. Webix Tree обладает полной функицональностью виджета tree. Он позволяет представлять иерархические данные в виде дерева, ветки которого можно развернуть или свернуть. Webix Tree работает быстро, отрисовывая тысячи элементов менее, чем за секунду. Если этого мало, можно использовать динамическую загрузку данных.
view: "tree", data: nested_data
});
Grouplist
Grouplist очень похож на Tree по функциональности. Он отображает те же данные, но в другом виде. Этот виджет стал популярен после расцвета мобильного веба. Ограничения в размере экранов мобильных устройств и слишком мелкие для тач-действий активные элементы дерева стали причиной замены tree на grouplist в большинстве мобильных устройств. API и формат данных для Grouplist похожи на API и формат данных Tree, поэтому вы можете заменить одно view на другое не изменяя логику приложения.
view: "grouplist", data: nested_data
});
TreeTable
Tree — отличный компонент, но он не слишком информативный. По умолчанию одна запись в дереве отображает только одно свойство. Используя темплейт, можно разместить больше информации в одном элементе, но все равно количество информации, которое можно показать, ограниченно. Тут на помощь приходит TreeTable. Он не только обладает полным набором функций Tree, но и способен отображать данные сразу в несколько столбцов.
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
});
Subviews в DataTable
Сейчас, благодаря TreeTable, у нас есть решение, которое позволяет отрисовывать вложенные данные в большом количестве столбцов. Все работает отлично, кроме одного момента. В случае с TreeTable, на каждом уровне данные одинаковые. В реальных приложениях данные на разных уровнях могут отличаться (например, на верхнем уровне могут размещаться магазины, на втором — категории, а на третьем — продукты). К счастью, у Webix есть решение. Начиная с версии Webix 3.0, вы можете использовать в DataTable Subviews. А именно, задать для каждого уровня различные таблицы с данными. Как в нашем примере:
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 }
]
});
Как видите, конфигурация главной таблицы включает в себя конфигурацию подтаблицы. И эта конфигурация может повторяться нужное количество раз, подтаблица может содержать еще одну подтаблицу, и т.д. Все подтаблицы работают так же, как и обычный виджет DataTable, поэтому вы можете загружать, редактировать, сохранять и фильтровать данные с помощью обычного API.
Добавление нового измерения
Для более сложных данных виджетов нет. Тем не менее, вы можете создать такой виджет сами. Это еще одно преимущество использования библиотеки Webix. В вашем распоряжении находится набор строительных блоков. Если дефолтных виджетов вам недостаточно, вы можете легко создать новый виджет из имеющихся блоков. Давайте предположим, что в дополнение к комплексным иерархическим данным у нас есть второй набор вложенных данных (каждый магазин имеет список категорий + список работников). Чтобы реализовать эту задачу в интерфейсе, мы можем добавить кнопку в DataTable и создать отдельный pop-up, который будет использоваться для отображения работников.
Представленное решение — лишь одна из многих возможностей размещения большого количества данных в ограниченном пространстве экрана.
Где предел?
Предела нет. Webix UI предлагает вам инструменты для визуализации данных любой сложности. Как видите, в библиотеке имеется множество способов для отрисовки вложенных данных, от простого дерева до сложных иерархических виджетов. Это не значит, что нужно использовать такие сложные интерфейсы для решения повседневных задач. Если вам нужно создать простую страницу, вы можете использовать любой инструмент по своему выбору. Но если требуется создать что-то более сложное, попробуйте сначала Webix, и вы не пожалеете.
