TreeView
A tree view that presents a hierarchical view of information. Create treeview simple and easy with Metro 4.
About
To creating treeview we use <ul> element with role data-role="treeview".
Nodes are defined with <li> element.
To create subtree just add an <ul> inside the <li>.
<ul data-role="treeview">
<li>...</li>
...
<li>...</li>
<ul>
<li>...</li>
...
<li>...</li>
</ul>
</ul>
Add node
Node is a <li> with special data-* attributes.
The attributes are define: icon and caption of node.
<li data-icon="..." data-caption="..."></li>
<ul data-role="treeview">
<li data-icon="<span class='mif-star-full'></span>" data-caption="Favorites">
<ul>
<li data-icon="<span class='mif-library'></span>" data-caption="Projects"></li>
<li data-icon="<span class='mif-download'></span>" data-caption="Downloads"></li>
<li data-icon="<img src='images/desktop.png'>" data-caption="Desktop"></li>
</ul>
</li>
<li data-icon="<span class='mif-onedrive'></span>" data-caption="OneDrive">
<ul>
<li data-caption="Documents"></li>
<li data-caption="Projects">
<ul>
<li data-caption="Web"></li>
<li data-caption="Android"></li>
<li data-caption="Windows"></li>
<li data-caption="iOS"></li>
</ul>
</li>
</ul>
</li>
</ul>
Add inputs
You can add input controls into treeview nodes. A prerequisite is the need to put each input in a separate <li>.
Checkbox
<li><input type="checkbox" data-role="checkbox"></li>
Radio
<li><input type="radio" data-role="radio"></li>
Switch
<li><input type="checkbox" data-role="switch"></li>
Input
<li><input type="text" data-role="input"></li>
Select
<li><select data-role="select">...</select></li>
Textarea
<li><textarea data-role="textarea"></textarea></li>
<ul data-role="treeview">
<li class="expanded" data-caption="Checkboxes">
<ul>
<li><input type="checkbox" data-role="checkbox" data-caption="Play animation"></li>
<li><input type="checkbox" data-role="checkbox" data-caption="Play sound" checked></li>
<li><input type="checkbox" data-role="checkbox" data-caption="Disabled" disabled></li>
<li><input type="checkbox" data-role="checkbox" data-caption="Disabled checked" checked disabled></li>
</ul>
</li>
<li class="expanded" data-caption="Radios">
<ul>
<li><input type="radio" name="r1" data-role="radio" data-caption="Play animation"></li>
<li><input type="radio" name="r1" data-role="radio" data-caption="Play sound" checked></li>
<li><input type="radio" data-role="radio" data-caption="Disabled" disabled></li>
<li><input type="radio" data-role="radio" data-caption="Disabled checked" checked disabled></li>
</ul>
</li>
<li class="expanded" data-caption="Switches">
<ul>
<li><input type="checkbox" data-role="switch" data-caption="Play animation"></li>
<li><input type="checkbox" data-role="switch" data-caption="Play sound" checked></li>
<li><input type="checkbox" data-role="switch" data-caption="Disabled" disabled></li>
<li><input type="checkbox" data-role="switch" data-caption="Disabled checked" checked disabled></li>
</ul>
</li>
<li class="expanded" data-caption="Inputs">
<ul>
<li style="width: 220px"><input type="text" data-role="input"></li>
<li style="width: 220px">
<select data-role="select">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
</li>
<li style="width: 220px"><textarea data-role="textarea"></textarea></li>
</ul>
</li>
</ul>
Options tree
If you need to create options tree, you can deal with this easy with Metro 4 treeview component.
You do not need any special actions, just add the checkboxes to nodes. Indeterminate state for checkboxes will be enabled automatically.
<ul data-role="treeview">
<li>
<input data-role="checkbox" data-caption="Player options">
<ul class="expanded">
<li>
<input data-role="checkbox" data-caption="Play video">
<ul>
<li><input data-role="checkbox" data-caption="AVI"></li>
<li><input data-role="checkbox" data-caption="MPEG"></li>
<li><input data-role="checkbox" data-caption="VIDX"></li>
<li><input data-role="checkbox" data-caption="MP4"></li>
<li><input data-role="checkbox" data-caption="XVID"></li>
</ul>
</li>
<li><input data-role="checkbox" data-caption="Play audio"></li>
<li>
<input data-role="checkbox" data-caption="Subtitles">
<ul>
<li>
<input data-role="checkbox" data-caption="Languages">
<ul>
<li><input data-role="checkbox" data-caption="English"></li>
<li><input data-role="checkbox" data-caption="Ukrainian"></li>
<li><input data-role="checkbox" data-caption="Dutch"></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Events
When treeview works, it generated the numbers of events. You can use callback for this events to behavior with treeview.
| Event | Data-* | Desc |
|---|---|---|
| onNodeClick(node, tree) | data-on-node-click |
Fired when user click on node caption |
| onNodeDblClick(node, tree) | data-on-node-dblclick |
Fired when user dblclick on node caption |
| onNodeInsert(node, tree) | data-on-node-insert |
Fired when node was inserted |
| onNodeDelete(node, tree) | data-on-node-delete |
Fired when node was deleted |
| onNodeClean(node, tree) | data-on-node-clean |
Fired when node was cleaned |
| onCheckClick(state, check, node, tree) | data-on-check-click |
Fired when user click on checkbox |
| onRadioClick(state, check, node, tree) | data-on-radio-click |
Fired when user click on radio input |
| onExpandNode(node, tree) | data-on-expand-node |
Fired when node was expanded |
| onCollapseNode(node, tree) | data-on-collapse-node |
Fired when node was collapsed |
| onTreeviewCreate(node, tree) | data-on-treeview-create |
Fired when tree was created |
Methods
You can use treeview methods to interact with the component.
- toggleNode(node) - toggle node state
- addTo(node, data) - add child node
- insertBefore(node, data) - add new node before specified node
- insertAfter(node, data) - add new node after specified node
- del(node) - delete node from tree
- clean(node) - clean node
<button class="button" onclick="
$('#tv_1').data('treeview').addTo(null, {
caption: 'New node',
icon: '<span class=\'mif-air\'></span>'
})
">Add node</button>
<button class="button" onclick="
$('#tv_1').data('treeview').addTo($('#tv_1').find('.current'), {
caption: 'New node'
})
">Add subnode</button>
<button class="button" onclick="
var tv = $('#tv_1');
tv.data('treeview').addTo(tv.find('.current'), {
html: '<input data-role=checkbox data-caption=Checkbox>'
})
">Add checkbox</button>
<button class="button" onclick="
$('#tv_1').data('treeview').insertBefore($('#tv_1').find('.current'), {
caption: 'Before node'
})
">Insert before</button>
<button class="button" onclick="
$('#tv_1').data('treeview').insertAfter($('#tv_1').find('.current'), {
caption: 'After node'
})
">Insert after</button>
<button class="button" onclick="
$('#tv_1').data('treeview').del($('#tv_1').find('.current'))
">Delete</button>
<button class="button" onclick="
$('#tv_1').data('treeview').clean($('#tv_1').find('.current'))
">Clear</button>
<hr>
<ul data-role="treeview" id="tv_1"></ul>