Tree Widget
Tree widgets are useful to display information in a tree like structure.
Basic Usage
$.domLoaded(function() {
$.get("#tree").widget("tree");
}
HTML Template
<ul id="tree">
<li> <span><input type="checkbox">Item 0</input></span>
<ul>
<li> <span>Item 0.0</span></li>
<li> <span>Item 0.1</span></li>
</ul>
</li>
</ul>
Methods
| Name | Description |
|---|
| getChild( "POS_INDEX" [, immediate ] ) | Gets all the children elements. The Position index should be in string.
Format:
First child should be represented as "0"
First child of first child should be represented as "00" ...
if immediate is set to true, only immediate children will be selected
Returns Array of Nedil.Objs
|
| insert( "POS_INDEX" , ARRAY_OF_CHILD ) | Inserts child elements. The Position index should be in string.
Format:
First child should be represented as "0"
First child of first child should be represented as "00" ...
Array of child should be of String values
Returns Array of Nedil.Objs
|
Tree Widget Examples
Example 1
JS
HTML
$.domLoaded( function() {
var tr = $.get("#tree").widget("tree");
$.get("#btn").on("click", function() {
tr.insert("00", ["Ganesh","Senthil"]);
});
$.get("#btn1").on("click", function() {
var arr = tr.getChild("01");
$.Util.forEach(arr, function(el) {
el.style("color", "red");
});
});
$.get("#btn2").on("click", function() {
var arr = tr.getChild("01", true);
$.Util.forEach(arr, function(el) {
el.style("color", "blue");
});
});
});
<body>
<h4>Tree with basic functionalities</h4>
<input type="button" value="Add Children to Item 0.0" id="btn"/>
<input type="button" value="Select All Children of Item 0.1" id="btn1"/>
<input type="button" value="Select Immediate Children of Item 0.1" id="btn2"/>
<br/><br/>
<ul id="tree">
<li> <span><input type="checkbox">Item 0</input></span>
<ul>
<li> <span>Item 0.0</span></li>
<li> <span>Item 0.1</span>
<ul>
<li> <span>Item 0.1.0</span>
<ul>
<li> <span>Item 0.1.0.0</span></li>
<li> <span>Item 0.1.0.1</span>
<ul>
<li> <span>Item 0.1.0.1.0</span></li>
<li> <span>Item 0.1.0.1.1</span></li>
</ul>
</li>
</ul>
</li>
<li> <span>Item 0.1.1</span></li>
</ul>
</li>
<li> <span>Item 0.2</span>
<ul>
<li> <span>Item 0.2.0</span></li>
<li> <span>Item 0.2.1</span></li>
</ul>
</li>
</ul>
</li>
<li> <span>Item 1</span>
<ul>
<li> <span>Item 1.0</span></li>
<li> <span>Item 1.1</span></li>
</ul>
</li>
</ul>
</body>
