# j-Tree

> Setter breidt automatisch elk object uit door een .$pointer eigendom toe met een boomindex.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: nl
Content-SHA256: 17383ebb384c1e1907546f4ec813baa9e038c0465ca08b0b00495dec6e5688a9
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__Configuratie__:

- `first {Boolean}` selecteert het eerste hout item, standaard: `true` (optional)
- `exec {String}` __verplicht__: een link naar een functie, deze functie wordt uitgevoerd wanneer de knop is geselecteerd in de boom
- `autoreset {Boolean}` herstelt de status wanneer de gegevensbron wordt gewijzigd (optional, default: `false`)
- `selected {String}` geselecteerde klasse (optional, standaard: `selected`)
- `checked {String}` Optie, een weg naar `function(arr, component)` Of de weg naar `property`
- `checkednested {Boolean}` optioneel, controleert alle gebogen items (default: `true`)
- `upload {String}` optioneel, een route naar `function(item, files)` (mogelijk draag & drop bestanden)
- `dragdrop {String}` optioneel, een route naar `function(item, target_item, itemel, targetel)` (mogelijk dragen en drop items)
- `options {String}` optioneel, een route naar `function(item, el)` maakt een kleine knop mogelijk voor een inline contextmenu voor elk item
- `rename {String}` optioneel, een weg naar `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` optioneel, kan `unselect` geselecteerd item wanneer de gebruiker klikt op het uitbreidbare item (default: `false`)
- `reselect {Boolean}` optioneel, beoordeelt `exec` opnieuw als de boom is verfrissend (default: `false`)
- `selectexpand {Boolean}` optioneel, mogelijk het toevoegen van de `selected` klasse aan uitbreidbare items (default: `false`)
- `iconoptions {String}` icon naar opties (default: `ti ti-ellipsis-h`)
- `expanded {Boolean}` breidt alle kinderen uit (default: `false`)
- __NEW__: `contextmenu {String}` optioneel, een route naar `function(item, el)` maakt de muis contextmenu mogelijk
- __NEW__: `key {String}` een waarde kan worden gebruikt als `index` in de onderstaande methoden (default: `path`)

__De gegevensstructuur__:

- Objecten Array
- Het object moet `name:String` en `children:[another similar object]` of `children:null` bevatten (met geen kinderen)
- Object item kan `..., icon: 'home' }` bevatten, het kan een bestand icon wijzigen
- Object item kan `..., classname: 'css_custom_class' }` bevatten, het voegt een CSS-klasse toe aan het element "Label"
- Object item kan `..., html: 'RAW_HTML'` {String} renders HTML tags in plaats van `name` veld bevatten

__Methoden__:

- `component.expand([index])` - uitbreidt de `index` of `all` (met geen gedefinieerde `index`) noden
- `component.collapse([index])` - collapses `index` of `all` (met geen gedefinieerd `index`) noden
- `component.clear()` - reinigt een cache om de bron te verfrisseren
- `component.select(index)` - selecteert de knop
- `component.unselect()` - Onverkiezingsnode
- `component.rename(index)` - toont `input` voor naamvernieuwing (dit werkt met `config.rename`)

__Goed om te weten__:

Setter breidt automatisch elk object door een `.$pointer` eigenschap toe met een boomindex.

Gebruik het met `<ui-component name="tree">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

```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>
```