Загрузка и Сохранение Данных

Структура элемента данных

Данные можно загрузить из различных источников. Однако Kanban Board хранит элементы данных в виде объектов JSON:

{
    "id":2,
    "status":"in progress",
    "user_id":5,
    "text":"Performance tests",
    "color":"#FE0E0E",
    "tags":[1],
    "comments":[2,3],
    "attachments":[
        { id:2, link:"./server/files/image001.jpg", size:85919 },
        { id:3, link:"./server/files/image002.jpg", size:105981 }
    ],
    "$list":1
}

У каждого элемента данных есть уникальный ID, а также набор других свойств:

• status - {string} статус элемента, определяет в каком списке будет отображен элемент (обязательный параметр);
• text - {string} название элемента (задачи);
• tags - {string,array} список тегов через запятую или массив их ID (если данные для тегов представлены в отдельном наборе данных);
• $list - {numeric} индекс списка, в который помещен элемент;
• comments - {array} список комментариев или массив их ID (если данные для комментариев представлены в отдельном наборе данных);
• color - {string} цвет для подсвечивания карточки;
• user_id - {numeric} ID пользователя, которому назначена эта задача;
• attachments - {array} список файлов, прикрепленных к карточке.

Kanban Board поддерживает все форматы данных библиотеки Webix.

Загрузка основных данных

Существует два основных способа указать источник данных для Kanban Board:

• Задать данные с задачами в конструкторе объекта.

• Использовать свойство url.

Оба способа работают одинаково.

Загрузка из данных, доступных на клиенте

Если вы хотите задать данные, доступные на клиенте, используйте свойство data.

webix.ui({
    view:"kanban",
    cols:[
        { header:"Backlog", body:{ view:"kanbanlist", status:"new" }},
        // ... другие колонки
    ],
    // задачи
    data:[
        {
            id:1, text:"Tutorial 1 on Kanban", status:"new",
            comments:[2], user_id:1, tags:[1,2]
        },
        {
            id:2, text:"Kanban app in Jet", status:"new",
            comments:[1], user_id:2, tags:[2]
        }
    ]
});

Загрузка из файла или скрипта

Вы можете использовать свойство url, чтобы задать путь к статическому файлу с данными или скрипту:

webix.ready(function(){
    webix.ui({
        view:"kanban",
        cols:[
            { header:"Backlog",
                body:{ view:"kanbanlist", status:"new" }},
            // ... другие колонки
        ],
        url: "/data/tasks"          });
});

Загрузка данных для тегов, пользователей и цветов

Для пользователей, тегов и цветов вы можете задать отдельные наборы данных:

• данные, доступные на клиенте

webix.ui({
    view:"kanban",
    users:[
        { id:1, value:"Virginia Woolf", image:"imgs/woolf.jpg" },
        { id:2, value:"David H. Lawrence", image:"imgs/lawrence.jpg" }
    ],
    tags:[
        { id:1, value:"webix" },
        { id:2, value:"jet" }
    ],
    colors:[
        {id:1, value:"Normal", color:"green"},
        {id:2, value:"Low", color:"orange"},
        {id:3, value:"Urgent", color:"red"}
    ]
});

• путь к скрипту или Data Collections

var tags = new webix.DataCollection({ data:[] });
 
webix.ui({
    view:"kanban", 
    url: "/data/tasks",         
    users: "/data/users"
    tags: tags                              
});

Больше информации о загрузке данных Kanban в документации DataStore.

Сохранение данных

Существует множество способов сохранять данные в Webix. Всю необходимую информацию можно найти в статье Сохранение данных.

Например, если вы используете DataProcessor, необходимо задать свойство save:

webix.ready(function(){
    webix.ui({
        view:"kanban",
        cols:[
            { header:"Backlog", body:{ view:"kanbanlist", status:"new" }},
            // ... другие колонки
        ],
        url: "/data/tasks",
        save: "json->/data/tasks_save"                          });
});

Related sample:  Kanban: Loading and Saving Data

Вложения

Пользователи могут прикреплять файлы к карточкам Kanban. Включить эту возможность можно с помощью свойства attachments. Значение свойства определяет путь для загрузки файлов.

webix.ui({
    view:"kanban", type:"space",
    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" }}
    ],
    userList:true,
    editor:true,
    url:"/data/tasks",
    attachments:"/data/upload"
});

Пути к файлам хранятся в соответствующих элементах данных, например:

{
    "id":2,
    "status":"in progress",
    "text":"Performance tests",
    "attachments":[                                                         { id:2, link:"./server/files/image001.jpg", size:85919 },           { id:3, link:"./server/files/image002.jpg", size:105981 }       ],                                                                  "$list":1
}

Related sample:  Kanban: Attachments to cards

Наверх