Создание Kanban Board на Странице

Для создания Kanban Board на странице необходимо:

1. Включить необходимые JS и CSS файлы в HTML файл.
2. Вызвать конструктор объекта.

Необходимо включить 4 файла:

<!-- файлы js -->
<script src="codebase/webix.js" type="text/javascript"></script>
<script src="codebase/kanban/kanban.js" type="text/javascript"></script>
<!-- файлы css -->
<link rel="stylesheet" href="codebase/webix.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="codebase/kanban/kanban.css" type="text/css" charset="utf-8">

Простейший Webix Kanban Board можно создать так:

// функция webix.ready() запускает выполнение кода после загрузки страницы
webix.ready(function(){
    // объект конструктора
    webix.ui({
        view:"kanban", 
        // определяет структуру колонок на доске
        cols:[
            { header:"Backlog",
                body:{ view:"kanbanlist", status:"new" }},
            { header:"In Progress",
                body:{ view:"kanbanlist", status:"work" }},
            { header:"Testing",
                body:{ view:"kanbanlist", status:"test" }},
            { header:"Done",
                body:{ view:"kanbanlist", status:"done" }}
        ],
        // путь к файлу с данными
        url: "/data/tasks"
    });
});

Related sample:  Basic Init of Kanban Board

Существует три способа запустить пакетные примеры локально. Самый простой способ - перейти в корневую директорию, затем в папку samples и открыть необходимый пример двойным щелчком мыши. Пример откроется в новой вкладке браузера.

Как запустить примеры на локальном сервере

Вы можете использовать любой локальный сервер (напр., Apache). Укажите папку Kanban как корневую директорию локального сервера и запустите его. Обычно локальный сервер доступен по localhost.

Как запустить примеры на дев сервере

Чтобы менять код в примерах и видеть соответствующие изменения, вам необходимо запустить дев сервер. Перейдите в корневую папку Kanban, установите необходимые зависимости и запустите дев сервер:

// переходим в корневую папку
cd kanban
 
// устанавливаем зависимости
yarn install //или npm install
 
// запускаем дев сервер
yarn server //или npm run server