# j-Tree

> Setter erweitert jedes Objekt automatisch, indem es die Eigenschaft .$pointer mit einem Baumindex hinzufügt.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 3bd234ca0e2486c9f923fdf03a63330ee3c4edd9adf8dc758ca1f2134911a730
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__Konfiguration__:

- `first {Boolean}` wählt das erste Baum, Standard: `true` (optional)
- `exec {String}` __bedarf__: Link zu einer Funktion, diese Funktion wird ausgeführt, wenn die Node im Baum ausgewählt ist
- `autoreset {Boolean}` nimmt den Zustand zurück, wenn die Datenquelle geändert wird (optional, Standard: `false`)
- `selected {String}` ausgewählte Klasse (optional, Standard: `selected`)
- `checked {String}` optionale, eine Route nach `function(arr, component)` oder eine Rate nach `property`
- `checkednested {Boolean}` optionale, überprüft alle Nested Artikel (Default: `true`)
- `upload {String}` optionale, eine Route nach `function(item, files)` (erlaubt die Entfernung und Abfuhrdateien)
- `dragdrop {String}` optionale, eine Strecke nach `function(item, target_item, itemel, targetel)` (erlaubt Drachen und Abfällen)
- `options {String}` optionale, eine Route nach `function(item, el)` ermöglicht einen kleinen Button für ein Inline-Kontextmenü für jedes Element
- `rename {String}` optional, ein Pfad zu `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` optionale, kann `unselect` ausgewähltes Element, wenn der Benutzer auf das erweiterbare Element klickt (Default: `false`)
- `reselect {Boolean}` optionale, beurteilt `exec` erneut, wenn das Baum erfrischt wird (Default: `false`)
- `selectexpand {Boolean}` optionale, ermöglicht die Ergänzung der `selected` Klasse zu erweiterbaren Elementen (Default: `false`)
- `iconoptions {String}`-Ikon für Optionen (Default: `ti ti-ellipsis-h`)
- `expanded {Boolean}` erweitert alle Kinder (Default: `false`)
- __NEW__: `contextmenu {String}` optionale, eine Route zum `function(item, el)` ermöglicht den Kontextmenü
- __NEW__: `key {String}` kann als `index` in den folgenden Methoden verwendet werden (Default: `path`)

__Datenstruktur__:

- Objekt Array
- Objekt muss `name:String` und `children:[another similar object]` oder `children:null` enthalten (mit keinem Kind)
- Objekt kann `..., icon: 'home' }` enthalten, es kann eine Datei-Ikon ändern
- Das Objekt kann `..., classname: 'css_custom_class' }` enthalten, es fügt einen CSS-Klasse auf das Element "Label" hinzu
- Objekt kann `..., html: 'RAW_HTML'` {String} Render HTML-Tags statt `name` Feld enthalten

__Methoden__:

- `component.expand([index])` - erweitert `index` oder `all` (mit kein definierter `index`) Knoten
- `component.collapse([index])` - Kollaps `index` oder `all` (mit kein definierter `index`) Knoten
- `component.clear()` - reinigt eine Cache für die Erfrischung der Quelle
- `component.select(index)` - Node auswählen
- `component.unselect()` - Unselekt Node
- `component.rename(index)` - zeigt `input` für den Namen (es funktioniert mit `config.rename`)

__Gut zu wissen__:

Setter erweitert automatisch jedes Objekt, indem es eine `.$pointer` Eigenschaft mit einem Baumindex hinzufügt.

Verwenden Sie es mit `<ui-component name="tree">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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