Получение узла и его настройка

У Tree есть несколько методов для получения id элемента, а также для работы со свойством узла value.

Получение объекта узла

Получить объект узла можно с помощью метода getItem method:

Получение объекта узла

var tree = webix.ui({
    view:"tree",
    data: [
        { id:"branch1", value:"The Shawshank Redemption", data:[
            { id:"part1", value:"Part 1" },
            { id:"part2", value:"Part 2" }
        ]}
    ]
});
 
// переменная 'node' будет включать в себя объект узла
var node = tree.getItem('branch1');
 
// доступ к свойстам объекта возможен через *.* (точку)
var value = node.value; // ->"The Shawshank Redemption"

У Item object есть следующие свойства:

• id - (string) id элемента
• value - (string) название (текст) узла
• $level - (number) уровень вложенности
• $parent - (string) id родительского элемента узла
• $count - (number) количество дочерних элементов
• open - (boolean) определяет, развёрнут узел или свёрнут (только для родительских элементов)

У объекта также может быть дополнительное свойство checked (boolean), которое используется в темплейтах с чекбоксами. Оно определяет, будет ли изначально отмечен чекбокс для соответствующего элемента.

Например, переменная node из примера выше содержит в себе следующую информацию:

var node = {
    $count: 2,
    $level: 1,
    $parent: 0,
    id: "branch1",
    open: true,
    value: "The Shawshank Redemption"
}

Изменение value узла

Алгоритм изменения текста узла:

Изменение текста узла

var tree = webix.ui({
    view:"tree", ...
});
 
var nodeObj = tree.getItem(node_id);
nodeObj.value = new_value;
tree.refresh();
 
// или
tree.updateItem(node_id, { value:"New value" });

refresh и updateItem работают аналогично.

Получение индекса узла

Получить индекс узла в ветке (начиная с 0) можно с помощью метода getBranchIndex:

Индекс узла

var tree = webix.ui({
    view:"tree",
    data: [
        { id:"branch1", value:"The Shawshank Redemption", data:[
            { id:"1.1", value:"Part 1" },
            { id:"1.2", value:"Part 2" }
        ]}
    ]
});
 
var index  = tree.getBranchIndex('1.1'); // -> 0
var index1 = tree.getBranchIndex('1.2'); // -> 1

Существует метод getIndexById, который также позволяет получить индекс узла, но использовать его не рекомендуется. Метод наследуется всеми компонентами DataStore класса и не используется в древовидных структурах.

Получение id узла

Получить id узла можно с помощью нескольких методов:

Методы получения ID узлов

Метод	Описание
getIdByIndex	возвращает id элемента по указанному индексу
getParentId	возвращает ID родительского элемента
getFirstChildId	возвращает ID первого дочернего элемента указанной ветки. Возвращает null, если элементов нет
getNextSiblingId	возвращает ID следующего элемента указанного узла
getPrevSiblingId	возвращает id предыдущего элемента

Получение id родительского элемента

var tree = webix.ui({
    view:"tree",
    data: [
        { id:"branch1", value:"The Shawshank Redemption", data:[
            { id:"part1", value:"Part 1" },
            { id:"part2", value:"Part 2" }
        ]}
    ]
});
 
var parent = tree.getParentId('part1'); // -> 'branch1'

Наверх