Ui-tree.js is a pure javascript plugin for rendering three-state checkboxes tree form JSON data. It also could be attached to existing HTML with "ul-li" tree. It could handle many thousands of tree items without performance issues.
Use bower
to install it to your app:
bower install --save ui-tree.js
or download latest release and attach it manually:
<script src="ui-tree.min.js"></script>
<link href="ui-tree.min.css" rel="stylesheet">
var uiTreeInstance = UiTree.draw(container, tree);
or for already generated content
var uiTreeInstance = UiTree.init(container);
where container
is a DOM node to attach generated HTML, and tree
is an object with tree data (see examples for structure).
Both methods returning created instance object uiTreeInstance
:
uiTreeInstance.container
- property contains DOM node passed to with attached tree.uiTreeInstance.getValues(returnEmptyIfAllChecked)
- return an array with ids of checked items. WherereturnEmptyIfAllChecked
is a boolean which allow returning an empty array in case all items are checked.uiTreeInstance.hasValues()
- returntrue
if at least one checkbox is checked orfalse
otherwise.
Another one useful method just render and return HTML string for passed tree object. Could be used in server side for generating static HTML.
var uiTreeHtml = UiTree.render(tree);
Example with JSON data:
var uiTreeInstance = uiTree.draw(document.getElementById('container'), tree);
where tree
variable is object with structure like
[
{"label":"UI Tree Root", "children":[
{"label":"Gutmann, Fritsch and Steuber", "children":[
{"label":"Marvin Group", "children":[
{"label": "Bode, Deckow and Wolff", "children":[
{"label":"Kutch and Daughters", "id":"203838b2-eff5-49db-95d6-0f6f40830b89", "checked":true},
{"label":"Kautzer and Sons", "id":"60c4536b-135a-4abb-822c-2e26df1749d9"},
{"label":"Herzog-Renner", "id":"12cc1fdb-23b3-4336-add4-df1a002df332", "checked":true}
]}
]}
], "expanded": true},
{"label":"Christiansen, Grant and Spencer", "id":"60403a9d-f972-427d-a6ba-16812aa98576", "checked":true},
{"label":"Feeney, Hickle and Luettgen", "id":"ec76491a-90ca-4217-98be-3ee98911eea5"},
{"label":"Osinski LLC", "id":"ba98b91f-bad9-4e31-85dc-fdedb745811c", "checked":true, "disabled":true}
]}
]
Example with manually generated HTML tree:
var uiTreeInstance = uiTree.init(document.getElementById('container'));
In this case HTML structure should looks like:
<div id="container">
<ul class="ui-tree-root"><li
class="ui-tree-item ui-tree-item-group" data-ui-tree-expanded="true"><div
class="ui-tree-item-label checkbox"><label
class="ui-tree-item-label-real"><span
class="ui-tree-item-toggler"></span><input
class="ui-tree-item-checkbox" type="checkbox" value=""><span
class="ui-tree-item-text">UI Tree Root</span>
</label>
</div><ul
class="ui-tree-children"><li
class="ui-tree-item"><div
class="ui-tree-item-label checkbox"><label
class="ui-tree-item-label-real"><span
class="ui-tree-item-toggler"></span><input
class="ui-tree-item-checkbox" type="checkbox" value="60403a9d-f972-427d-a6ba-16812aa98576"><span
class="ui-tree-item-text">Christiansen, Grant and Spencer</span>
</label>
</div>
</li><li
class="ui-tree-item"><div
class="ui-tree-item-label checkbox"><label
class="ui-tree-item-label-real"><span
class="ui-tree-item-toggler"></span><input
class="ui-tree-item-checkbox" type="checkbox" checked disabled value="ba98b91f-bad9-4e31-85dc-fdedb745811c"><span
class="ui-tree-item-text">Osinski LLC</span>
</label>
</div>
</li><li
class="ui-tree-item ui-tree-item-group" data-ui-tree-expanded="true"><div
class="ui-tree-item-label checkbox"><label
class="ui-tree-item-label-real"><span
class="ui-tree-item-toggler"></span><input
class="ui-tree-item-checkbox" type="checkbox" value=""><span
class="ui-tree-item-text">Gutmann, Fritsch and Steuber</span>
</label>
</div><ul
class="ui-tree-children"><li
class="ui-tree-item"><div
class="ui-tree-item-label checkbox"><label
class="ui-tree-item-label-real"><span
class="ui-tree-item-toggler"></span><input
class="ui-tree-item-checkbox" type="checkbox" checked value="ec76491a-90ca-4217-98be-3ee98911eea5"><span
class="ui-tree-item-text">Feeney, Hickle and Luettgen</span>
</label>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
There is some important requirements for your own HTML data:
- nodes should contains all needed
.ui-tree-*
classNames - no whitespaces allowed between nodes for better performance
- all inputs should have
value
attribute even if it empty for proper collecting checked values, otherwise all checkboxes will have default valueon
. - use UiTree.render(tree) to take care for all this stuff;)