j-TreeView

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

This component is only a beta preview. It's still under construction.

Configuration:

parent {String} a container with fixed height, can be window. Default value: parent element.
visibleY {Boolean} still shows Y scrollbar (default: true)
movable {Boolean} enables the moving of nodes (default: true)
cachexpand {Boolean} remembers the previous state (default: true)
arrows {Boolean} enables arrows for folders (default: true)
expanded {Boolean} expands all nodes (default: false)
autosort {Boolean} sorts nodes according to item.sort (if exists) or item.name (if exists), default: true
margin {Number} top/bottom margin together (default: 0)
marginxs {Number} top/bottom margin together for xs screen width
marginsm top/bottom margin together for sm screen width
marginmd top/bottom margin together for md screen width
marginlg top/bottom margin together for lg screen width
disabled {Boolean} disables the entire component
parentselectable {Boolean} parent will be selectable (default: true)

Data structure:

Object Array
Object has to contain id:String which is the main ID of each item
Object has to contain name:String and children:[another similar object] or children:null (with no children)
Object has to contain html:String is rendered as content (if it doesn't exist then name is rendered)
Object item can contain ..., classname: 'css_custom_class' }, it adds a CSS class onto the "label" element
Object item supports property actions: { expand: true, drop: true, move: true }

Use it with <ui-component name="treeview">. 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.

example.html

<div style="width:300px;height:200px;border:1px solid #E0E0E0;margin:50px">
	<ui-component name="treeview" path="nodes" config="exec:fn_selected"></ui-component>
</div>

<script>
	var nodes = [];
	nodes.push({ id: '1', name: 'Item 1', html: '<b>Item 1</b>', children: null });
	nodes.push({ id: '2', name: 'Item 2', children: null });
	nodes.push({ id: '3', name: 'Item 3', children: [{ id: 'A', name: 'SubItem 3 / 1', children: [{ id: 'AA', name: 'SubItem 3 / 1 / 1', children: null }]}]});
	nodes.push({ id: '4', name: 'Item 4', children: null });
	nodes.push({ id: '5', name: 'Item 5', children: [{ id: 'B', name: 'Subitem 5 / 1', children: null }, { name: 'Subitem 5 / 2', children: [{ id: 'BB', name: 'Subitem 5 / 2 / 1', children: [{ id: 'BC', name: 'Subitem 5 / 2 / 1 / 1', children: null }]}] }, { id: 'BD', name: 'Subitem 5 / 3', children: null }]});

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

</script>