WEBIX JAVASCRIPT LIBRARY BLOG

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

Tree

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

Как вы знаете из предыдущей статьи, DataTable может вмещать в себя неограниченное количество строк. А как обстоят дела с колонками?

Пример выше показывает грид с 1000 столбцами. Да, это не миллион, но все же впечатляет, не правда ли?

Хороший UI должно быстро адаптироваться к количеству данных. Даже если сейчас мы грузим в грид (DataTable) всего сотню записей, нет гарантии, что эти 100 записей не превратятся в 10 000 через месяц, либо же в 100 000 через год. Чем более успешным является ваше приложение, тем больше вероятность того, что количество данных в нем будет расти. Это значит, что вам будет необходимо переделать ваше приложение, чтобы поддерживать эти большие объемы данных.

При разработке Webix DataTable мы справились с этой трудностью. Сейчас, используя Webix DataTable, нет необходимости обновлять код приложения в случае роста его данных от сотни до тысячи, а может быть, и до миллиона записей. Если вы не верите в существование такого компонента — изучите демо, расположенное ниже: