# j-Tree

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 6de32fb568f7cd85c102f575c5c5cd2f47b1dc0116a3d93017bcd8ddf921c5e8
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__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.

```html example.html
<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>
```