j-Tree

Configuration:

• first {Boolean} selects the first tree item, default: true (optional)
• exec {String} required: link to a function, this function is executed when the node is selected in the tree
• autoreset {Boolean} resets state when datas-source is changed (optional, default: false)
• selected {String} selected class (optional, default: selected)
• checked {String} optional, a path to function(arr, component) or path to property
• checkednested {Boolean} optional, checks all nested items (default: true)
• upload {String} optional, a path to function(item, files) (enables drag & drop files)
• dragdrop {String} optional, a path to function(item, target_item, itemel, targetel) (enables drag & drop items)
• options {String} optional, a path to function(item, el) enables a small button for an inline context menu for each item
• rename {String} optional, a path to function(item, newname, fn_accept(true))
• unselectexpand {Boolean} optional, can unselect selected item when the user clicks on the expandable item (default: false)
• reselect {Boolean} optional, evaluates exec again if the tree is refreshed (default: false)
• selectexpand {Boolean} optional, enables adding selected class to expandable items (default: false)
• iconoptions {String} icon to options (default: ti ti-ellipsis-h)
• expanded {Boolean} expands all children (default: false)
• NEW: contextmenu {String} optional, a path to function(item, el) enables mouse contextmenu
• NEW: key {String} a value can be used as index in below methods (default: path)

Data structure:

• Object Array
• Object has to contain name:String and children:[another similar object] or children:null (with no children)
• Object item can contain ..., icon: 'home' }, it can change a file icon
• Object item can contain ..., classname: 'css_custom_class' }, it adds a CSS class onto the "label" element
• Object item can contain ..., html: 'RAW_HTML' {String} renders HTML tags instead of name field

Methods:

• component.expand([index]) - expands index or all (with no defined index) nodes
• component.collapse([index]) - collapses index or all (with no defined index) nodes
• component.clear() - clears a cache for refreshing the source
• component.select(index) - selects node
• component.unselect() - unselects node
• component.rename(index) - shows input for name renaming (it works with config.rename)

Good to know:

Setter automatically extends each object by adding .$pointer property with a tree index.

Use it with <ui-component name="tree">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

<style>
	.ui-tree { border: 1px solid #E0E0E0; }
	.ui-dark .ui-tree { border: 1px solid #404040; }
</style>

<div class="container">
	<div class="col-md-6">
		<div>Open Web Developer Console</div>
		<br />
		<ui-component name="tree" path="nodes" config="exec:fn_selected;checked:fn_checked"></ui-component>
	</div>
</div>

<script>
	var nodes = [];
	nodes.push({ name: 'Item 1', children: null });
	nodes.push({ name: 'Item 2', children: null });
	nodes.push({ name: 'Item 3', children: [{ name: 'SubItem 3 / 1', children: [{ name: 'SubItem 3 / 1 / 1', children: null }]}]});
	nodes.push({ name: 'Item 4', children: null });
	nodes.push({ name: 'Item 5', children: [{ name: 'Subitem 5 / 1', children: null }, { name: 'Subitem 5 / 2', children: [{ name: 'Subitem 5 / 2 / 1', children: [{ name: 'Subitem 5 / 2 / 1 / 1', children: null }]}] }, { name: 'Subitem 5 / 3', children: null }]});

	function fn_selected(node, isGroup, expanded) {
		console.log('SELECTED NODE:', node, isGroup, expanded);
	}

	function fn_checked(checked) {
		console.log('CHECKED', checked);
	}

</script>