Операции с узлами в Tree

Добавление узлов

Метод add позволяет добавить узел (родительский или дочерний). Расположение нового узла в дереве задаётся параметрами метода.

Для добавления сразу нескольких узлов рекомендуется использовать parse.

Метод add принимает 3 параметра:

obj - объект элемента
pos - расположение узла в дереве (начальное значение равно 0).
Обратите внимание:
- 0 - элемент добавиться в начало списка (начальная позиция)
- -1 - элемент добавиться в конец списка (конечная позиция)
parent - (необязательный параметр) id родительского узла. Если данный параметр не указан, элемент добавиться в корневой уровень дерева.

Чтобы получить расположение узла по его ID, можно обратиться к методу getBranchIndex. Подробнее о методе

Уровень вложенности Пример

Корневой узел

Добавление узлов
Уровень вложенности	Пример
Корневой узел	`var tree = webix.ui({ view:"tree",... }); tree.add({ value:"New item"}, 0);`
(Первый) дочерний узел	`var tree = webix.ui({view:'tree',..}); var parentId = tree.getSelectedId(); tree.add({value:"New item"}, 0, parentId);`
(Второй) дочерний узел	`var tree = webix.ui({view:'tree', ...}); var parentId = tree.getSelectedId(); var pos = tree.getBranchIndex("node2"); //'node2' is the 'Skoda' item's id tree.add( {value:"New item"}, pos, parentId);`

var tree = webix.ui({ view:"tree",... });
 
tree.add({ value:"New item"}, 0);

(Первый) дочерний узел

var tree = webix.ui({view:'tree',..});
 
var parentId = tree.getSelectedId();
tree.add({value:"New item"}, 0, parentId);

(Второй) дочерний узел

var tree = webix.ui({view:'tree', ...});
 
var parentId = tree.getSelectedId();
var pos = tree.getBranchIndex("node2"); //'node2' is the 'Skoda' item's id
 
tree.add( {value:"New item"}, pos, parentId);

Удаление узлов

Метод remove позволяет удалить узел (родительский или дочерний). Метод принимает ID узла в качестве аргумента.

Удаление выделенного узла

var tree = webix.ui({ view:"tree",... });
 
var nodeId = tree.getSelectedId();
tree.remove(nodeId);

Выделение узлов

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

Выделение узла

var tree = webix.ui({ view:"tree",... });
 
tree.select("node2"); // 'node2' is the item id

Подробнее о методе: Выбор элементов.

Развёртывание/свёртывание веток

Ветки в Tree можно разворачивать и сворачивать:

с помощью щелчка по узлу или соответствующим иконкам "+/-";
с помощью щелчка по названию узла (при условии, что свойство activeTitle определено для дерева)

view:"tree",
activeTitle:true, //false по умолчанию
data:[...]

Related sample: Tree: JSON Dataset

Чтобы развернуть/свернуть узел, существует несколько методов:

Метод	Описание
open	развёртывает ветку с указанным id
close	свёртывает ветку с указанным id
openAll	развёртывает все ветки в дереве
closeAll	свёртывает все ветки в дереве
isBranchOpen	проверяет развёрнута указанная ветка или нет
getOpenItems	возвращает id развёрнутых веток

Проверяет, развёрнута ветка или нет

var tree = webix.ui({ view:"tree",... });
 
var nodeId = tree.getSelectedId();
tree.isBranchOpen(nodeId);

Фильтрация узлов

Для фильтрации узлов существует метод filter method:

Фильтрация дерева

var tree = webix.ui({ view:'tree', ...});
 
tree.filter("#value#", "abc"); // оставляет только те элементы, которые содержат текст 'abc'

Related sample: Filtering

Подробнее о фильтрации: Фильтры в Tree.

Сортировка узлов

Для сортировки узлов используется метод sort method:

Восходящая сортировка дерева

var tree = webix.ui({ view:'tree', ...});
 
tree.sort("#value#", "asc"); // сортирует все узлы (родительские и дочерние)

Related sample: Sorting

Подробнее о сортировке: Сортировка в Tree.

Обновление дерева

Существует два метода для обновления дерева:

Оба метода имеют один и тот же результат

tree.refresh();
// или
tree.updateItem(node_id, nodeObj);

Наверх