Tree provides a set of methods for manipulating the node value and retrieving the node id.
To get the node object, you should use method getItem:
Getting the node object
tree = new 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, variable node from the code snippet above looks as in:
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
tree = new webix.ui({ view:"tree",...});
var nodeObj = tree.getItem(node_id);
nodeObj.value = new_value;
tree.refresh();
//or
tree.updateItem(node_id, nodeObj);
Methods refresh and updateItem lead to one and the same result and don't have any specificity.
To get the index of a node in the branch (zero-based numbering) you should use the getBranchIndex method:
Getting the node index
tree = new 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 suggest using it. It's a common method that is inherited by all data-containing components from the DataStore class and not intended 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
tree = new 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