TreeView
A tree view that presents a hierarchical view of information. Create treeview simple and easy with Metro UI.
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" data-collapsed="true">
<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 UI 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 type="checkbox" data-role="checkbox" data-caption="Play video" title="">
<ul>
<li><input type="checkbox" data-role="checkbox" data-caption="AVI" title=""></li>
<li><input type="checkbox" data-role="checkbox" data-caption="MPEG" title=""></li>
<li><input checked type="checkbox" data-role="checkbox" data-caption="VIDX" title=""></li>
<li><input type="checkbox" data-role="checkbox" data-caption="MP4" title=""></li>
<li><input checked type="checkbox" data-role="checkbox" data-caption="XVID" title=""></li>
</ul>
</li>
<li><input type="checkbox" data-role="checkbox" data-caption="Play audio" title=""></li>
<li>
<input type="checkbox" data-role="checkbox" data-caption="Subtitles" title="">
<ul>
<li><input type="checkbox" data-role="checkbox" data-caption="English" title=""></li>
<li><input checked type="checkbox" data-role="checkbox" data-caption="Ukrainian" title=""></li>
<li><input type="checkbox" data-role="checkbox" data-caption="Dutch" title=""></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="
Metro.getPlugin('#tv_1','treeview').addTo(null, {
caption: 'New node',
icon: '<span class=\'mif-air\'></span>'
})
">Add node</button>
<button class="button" onclick="
Metro.getPlugin('#tv_1','treeview').addTo($('#tv_1').find('.current'), {
caption: 'New node'
})
">Add subnode</button>
<button class="button" onclick="
Metro.getPlugin('#tv_1','treeview').addTo($('#tv_1').find('.current'), {
html: '<input data-role=checkbox data-caption=Checkbox>'
})
">Add checkbox</button>
<button class="button" onclick="
Metro.getPlugin('#tv_1','treeview').insertBefore($('#tv_1').find('.current'), {
caption: 'Before node'
})
">Insert before</button>
<button class="button" onclick="
Metro.getPlugin('#tv_1','treeview').insertAfter($('#tv_1').find('.current'), {
caption: 'After node'
})
">Insert after</button>
<button class="button" onclick="
Metro.getPlugin('#tv_1','treeview').del($('#tv_1').find('.current'))
">Delete</button>
<button class="button" onclick="
Metro.getPlugin('#tv_1','treeview').clean($('#tv_1').find('.current'))
">Clear</button>
<hr>
<ul data-role="treeview" id="tv_1"></ul>