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

У 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) определяет, развёрнут узел или свёрнут (только для родительских элементов)

Например переменная 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'
Наверх