Pavlenych Jan 29 2020 at 12:35

JavaScript библиотека Webix глазами новичка. Часть 3. Модули, диаграммы, древовидные таблицы

6 min

Website development*JavaScript*Programming*HTML*

Tutorial

Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеки.

Третья задача

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

разделение проекта на модули;
вкладки и переключение между ними;
настройка таблицы;
отрисовка списка и диаграммы;
создание древовидной таблицы.

Работа виджетов List и Layout была описана в предыдущих статьях.

Скачать исходники можно по ссылке.

С готовым приложением можно ознакомиться тут.

Шаг 1. Разделение проекта на модули

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

header.js — виджет Toolbar;
aside.js — виджет List;
table.js — виджет Datatable;
form.js — виджет Form;
footer.js — элемент с текстом: “The software is ...”.

В новых файлах описание конфигураций виджета происходит в переменной…

const footer = {
    height: 30,
    template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)",
    css:"bottom-link"
}

Созданные файлы подключаются в файле index.html в следующем порядке:

<body>
    <script src="functions.js"></script>
    <script src="users_module.js"></script>
    <script src="products_module.js"></script>
    <script src="data.js"></script>
    <script src="header.js"></script>
    <script src="table.js"></script>
    <script src="form.js"></script>
    <script src="aside.js"></script>
    <script src="footer.js"></script>
    <script src="script.js"></script>
</body>

Полученные модули комбинируются в файле script.js, который теперь содержит простой и лаконичный код инициализации приложения.

webix.ui({
    rows:[
        header,
        {
            cols:[
            aside, {view: "resizer"}, table, form
            ]
        },
        footer
    ]
});

Шаг 2. Вкладки и переключение между ними

В случаях когда свободного места на странице не хватает, либо требуется тематически разделить содержимое приложения — логично использовать вкладки.

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

Мультивью создам в файле aside.js:

const multi = {
    view: "multiview",
    cells:[
        { id:"dashboard", cols:[table, form ] },
        { id:"users", template:"Users" },
        { id:"products", template:"Products" }
    ]   
}

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

В файле script.js виджеты Table и Form я заменяю на модуль Multi.

webix.ui({
    rows:[
        header,
        {
            cols:[
            aside, {view: "resizer"}, /*table, form*/multi
            ]
        },
        footer
    ]
});

Роль переключателя между вкладками исполняет виджет List. Мне нужно, чтобы по клику на его элементы открывалась соответствующая вкладка.

Для удобства работы, элементам виджета List я задам те же id, что и вкладкам мультивью.

const aside = {
    view: "list",
    id:"mylist",
    scroll:false,
    select:true,
    width:200,
    css:"list_color",
    data:[
        {value:"Dashboard", id:"dashboard"},
        {value:"Users", id:"users"},
        {value:"Products", id:"products"}
    ],
    on:{
        onAfterSelect:function(id){ 
            $$(id).show();
        }
    }
}

При клике на элемент виджета List срабатывает onAfterSelect, внутри обработчика которого мы получаем id выбранного элемента и показываем одноименную вкладку, обращаясь к ней по id — они, как вы помните, совпадают.

Пример:

Важно!
Дальнейшие действия с данными будут осуществляться с запущенным локальным сервером.

Шаг 3. Вкладка “Dashboard” — настройка таблицы

До этого момента в проекте использовалась таблица, поля которой генерировались автоматически. В случае когда требуется удалить колонку, либо добавить новую, используются настройки таблицы. Для этого в виджете Datatable свойство autoConfig:true нужно заменить на массив columns c настройками для каждой колонки.

const table = {
    view:"datatable", 
    id:"film_list",
    scroll:"y",
    select:true,
    url:"data/data.js",
    hover:"myhover",
    columns:[
        { id:"rank", header:"", width:50, css:"rank"},
        { id:"title", header:"Film title", fillspace:true},
        { id:"year",  header:"Released", width:100},
        { id:"votes", header:"Votes", width:100},
        { id:"rating", header:"Rating", width:100}
    ]
}

Значение свойства id указывает на поле элемента данных, которое будет отображено в данной колонке;
свойство header в элементе — это заголовок столбца;
всем колонкам задана фиксированная ширина, но во второй из них используется свойство fillspace, которое позволяет колонке title занять все свободное пространство.

В таблице использованы пользовательские CSS настройки: для строк установлен hover а первой колонке изменен фон. Все настройки заранее определены в файле style.css и нужно только вставить название классов.

Также мне для таблицы понадобится больше данных, поэтому я загружу их из data/data.js указав к нему путь с помощью свойства url.

Результат:

Шаг 4. Вкладка “Users” — отрисовка списка и диаграммы

Во второй вкладке я создам список и диаграмму. Для этого во втором элементе Multiview я укажу название модуля — “users”.

const multi = {
    view: "multiview",
    cells:[
        { id:"dashboard", cols:[table, form ] },
        { id:"users", rows:[users] },
        { id:"products", template:"Products" }
    ]   
}

Для самих виджетов я создам новый файл users_module.js.

Список. Под списком понимается виджет List, ранее он был использован при создании меню. Строки списка должны состоять из имен пользователей и названий стран.

Код виджета List:

const users = {
    rows:[
        {
            view: "list",
            id:"user_list",
            select:true,
            url:"data/users.js",
            template:"#name# from #country#"
        },
        {
             template:"Chart"
        }
    ]
}

Массив rows использован для разделения рабочей области на две части. Вторая часть будет использована для диаграммы.

В свойстве template, между знаками # указывается поле, значение которого берется из элемента данных, который подгружается из файла users.js.

Результат:

Диаграмма. Библиотека поддерживает распространенные типы диаграмм: линия, круг, радар, пончик, столбец и пр. Все они создаются виджетом "chart". То как диаграмма будет выглядеть определяет свойство type.

Заменяю настройку template:”Chart” на код виджета:

const users = {
    rows:[
        {
            view: "list",
            id:"user_list",
            select:true,
            url:"data/users.js",
            template:"#name# from #country#"
        },
        {
            view:"chart",
            type:"bar",
            value:"#age#",
            url:"data/users.js",
            xAxis:{
                template:"#age#",
                title:"Age"
            }
        }
    ]
}

Настройка type: "bar" задает линейчатый тип диаграммы;
в value передаётся имя поля, и указывается оно обязательно в `#...#`. Это особенность виджета Chart;
настройка xAxis определяет какая информация будет отображена под диаграммой по оси X;
template указывает на то, что под линиями диаграммы буду цифры возраста;
title содержит название диаграммы — "Age".

Результат отрисовки списка и диаграммы:

Шаг 5. Вкладка “Products” — древовидная таблица

Для инициализации этого компонента я создам файл products_module.js, а в третьем элементе виджета Multiview укажу название модуля “products”.

const multi = {
    view: "multiview",
    cells:[
        { id:"dashboard", cols:[table, form ] },
        { id:"users", rows:[users] },
        { id:"products", rows:[products] }
    ]   
}

Для построения древовидной таблицы используется виджет Treetable. Одна из колонок виджета должна содержать обязательный шаблон — {common.treetable()}, иначе мы получим стандартную таблицу вместо древовидной. Шаблон позволяет сразу отрисовать характерные элементы:

активную иконку для того, чтобы свернуть/развернуть вложенные записи;
иконки “файл/папка”;
отступы в зависимости от уровня записей.

const products = {
    view:"treetable",
    scrollX:false,
    columns:[
        { id:"id", header:"", width:50 },
        { id:"value", header:"Title", fillspace:true, 
           template:"{common.treetable()} #title#" },
        { id:"price", header:"Price", width:200 }
    ],
    select:"row",
    url:"data/products.js"
}

Компонент treetable заполняется иерархическими данными, которые я получу из файла products.js.

Результат:

С получившимся приложением можно ознакомиться тут.

Обобщение

Шаг за шагом приложение дополняется новыми функциями. Важной стадией было разделение кода на модули. Разделение помогло избежать путаницы в коде и помогло организовать мультистраничный интерфейс. Интересным было освоение новых виджетов Webix в виде диаграмм и свободно редактируемых списков и таблиц. Всё также было просто, всё также гармонично.

Tags:

Hubs: