Tree provides a set of methods for manipulating the node value and retrieving the node id.
To get the node object, you should use the getItem method:
Getting the node object
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' variable will contain an object of the related tree node
var node = tree.getItem('branch1');
//you can access data members directly
var value = node.value; // ->"The Shawshank Redemption"
Item object has the following properties:
For example, the node variable from the code snippet above looks as in:
var node = {
$count: 2,
$level: 1,
$parent: 0,
id: "branch1",
open: true,
value: "The Shawshank Redemption"
}
To change the current value of a node (the node title), you should use the following technique:
Changing the node title
var tree = webix.ui({
view:"tree", ...
});
var nodeObj = tree.getItem(node_id);
nodeObj.value = new_value;
tree.refresh();
//or
tree.updateItem(node_id, { value:"New value" });
refresh and updateItem work to the same effect.
To get the index of a node in the branch (counting from 0), you should use the getBranchIndex method:
Getting the node index
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
There is also the getIndexById method to get the node index, but we don't advise using it. It's a common method that is inherited by all data components from the DataStore class and not for using with tree-like data structures.
To get the id of a node, you can use one of the following methods:
Method | Description |
---|---|
getIdByIndex | returns the item id by its index |
getParentId | returns the id of the parent node |
getFirstChildId | returns the id of the first child of the specified branch. If there are not any, returns null |
getNextSiblingId | returns the id of the next sibling of the specified node |
getPrevSiblingId | returns the id of the previous sibling of the specified node |
Getting the parent node 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'
Back to top