Работа с Данными

Kanban Board основана на DataStore, неиерархическом (встроенном) хранилище. Именно поэтому Kanban поддерживает API DataStore, включая методы, события и свойства.

В этом разделе вы познакомитесь со свойствами Kanban для работы с данными, унаследованными от DataStore. Особенности Kanban API рассмотрены в статьях: Особенности Kanban API и Обработка Событий.

Получение объекта элемента данных

Чтобы получить объект элемента данных, используйте метод getItem:

webix.ui({
    view:"kanban",
    id: "myBoard",
    cols:[
        { 
            header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { 
            header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        }
    ],
    data:[
        {id:"task1", text:"Drag-n-drop support", status: "new", $order: 0},
        {id:"task2", text:"Uploader for the form", status: "work", $order: 0},
        // ... другие карточки
    ]
});     
 
// переменная 'task' будет содержать объект соответствующей записи Kanban
var task = $$("myBoard").getItem("task1");
 
// вы можете получить доступ к полям объекта с данными карточки
var title = task.text;//-> "Drag-n-drop support"

Метод getItem() возвращает объект элемента данных, содержащий уникальный id и набор других свойств:

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

Проверка наличия элемента

Чтобы узнать представлен ли определенный элемент в наборе данных, используйте метод exists:

webix.ui({
    view:"kanban",
    id: "myBoard",
    cols:[
        { 
            header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { 
            header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        }
    ],
    data:[
        {id:"task1", text:"Drag-n-drop support", status: "new", $order: 0},
        {id:"task2", text:"Uploader for the form", status: "work", $order: 0}
    ]
});      
 
$$("myBoard").exists("task1");  // -> true
$$("myBoard").exists("task2222");   // -> false

Добавление нового элемента

Вы можете добавлять новые карточки с помощью метода add:

$$("myBoard").add({
    text: "Kanban docs",
    status: "new",
    // ... другие поля данных    
});

Чтобы попасть в список, добавляемый элемент должен содержать свойство status.

Изменение свойств данных для элемента

Чтобы изменить текущее значение любого свойства элемента, воспользуйтесь методом refresh или updateItem:

var task = $$("myBoard").getItem("task1");
task.text = "Ticket 225";
 
$$("myBoard").refresh("task1");
// или
$$("myBoard").updateItem("task1", task);

Оба метода работают одинаково.

Удаление элементов

Чтобы удалить элемент, примените метод remove:

// удаляет элемент
$$("myBoard").remove(itemId);

Пример удаления выбранного элемента приведен ниже:

var id = $$("myBoard").getSelectedId();
if(!id){
    return webix.alert("Please selected a card that you want to remove!");
}
$$("myBoard").remove(id);

Все элементы можно удалить из доски Kanban с помощью метода clearAll:

$$("mylist").clearAll();

Больше информации о добавлении и удалении элементов вы можете найти здесь.

Related sample:  Kanban: Adding New Items

Итерация элементов данных

Чтобы пройтись по всей коллекции данных используйте метод each класса DataStore.

webix.ui({
    view:"kanban",
    id:"myBoard",
    cols:[
        { 
            header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { 
            header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        }
    ],
    data:[
        { id:"task1", text:"Drag-n-drop support", status:"new", $order:0 },
        { id:"task2", text:"Uploader for the form", status:"work", $order:0 },
        // ... другие карточки
    ]
});
 
var titles = [];
$$("myBoard").data.each(function(obj){
    titles.push(obj.text);
});
//-> titles=["Drag-n-drop support", "Uploader for the form"]

Этот код аналогичен обычному циклу For:

for (i = 0; i < data.length; i++ ){
    titles.push(obj.text);
}

Фильтрация

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

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

webix.ui({
    view:"kanban", 
    id:"myBoard",
    cols:[
        { 
            header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { 
            header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        }
    ],
    data:[
        {id:"task1", text:"Drag-n-drop support", status: "new", personId: "1", ...},
        {id:"task2", text:"Uploader for the form", status: "work", personId: "2", ...},
        // ... другие карточки
    ]
});
 
$$("myBoard").filter("#personId#","1");

Чтобы отфильтровать карточки по нескольким свойствам, можно задать сложное правило фильтрации. В этом случае вы можете задать функцию, которая будет возвращать true или false. Элемент будет отображен, если функция возвращает true:

webix.ui({
    view:"kanban", 
    id:"myBoard",
    cols:[
        { 
            header:"Backlog",
            body:{ view:"kanbanlist", status:"new" }
        },
        { 
            header:"In Progress",
            body:{ view:"kanbanlist", status:"work" }
        }
    ],
    data:[
        {id:"1", text:"Task 1", status: "new", personId: "1", projectId: "22", ...},
        {id:"2", text:"Task 2", status: "work", personId: "2", projectId: "22", ...},
        // ... другие карточки
    ]
});
 
$$("myBoard").filter(function(task){
    return task.personId == "1" && task.projectId == "22";
});

Related sample:  Filtering

Наверх