# j-TreeView

> Bei dieser Komponente handelt es sich lediglich um eine Beta-Vorschau. Es ist noch im Aufbau.

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

Bei dieser Komponente handelt es sich lediglich um eine Beta-Vorschau. Es ist noch im Aufbau.


__Konfiguration__:

- `parent {String}` ein Container mit fester Höhe, kann `window` sein. Standardwert: `parent`-Element.
- `visibleY {Boolean}` zeigt weiterhin die Bildlaufleiste `Y` an (Standard: `true`)
- `movable {Boolean}` ermöglicht die Bewegung von Knoten (Default: `true`)
- `cachexpand {Boolean}` erinnert an den vorherigen Zustand (Default: `true`)
- `arrows {Boolean}` ermöglicht Fächer für Ordner (Default: `true`)
- `expanded {Boolean}` erweitert alle Knoten (Default: `false`)
- `autosort {Boolean}`-Sorten Noten nach `item.sort` (wenn vorhanden) oder `item.name` (wenn bestehen), Standard: `true`
- `margin {Number}` oberer/unterer Rand zusammen (Standard: `0`)
- `marginxs {Number}` oberer/unterer Rand zusammen für `xs` Bildschirmbreite
- `marginsm` oberer/unterer Rand zusammen für `sm` Bildschirmbreite
- `marginmd` oberer/unterer Rand zusammen für `md` Bildschirmbreite
- `marginlg` oberer/unterer Rand zusammen für `lg` Bildschirmbreite
- `disabled {Boolean}` deaktiviert die gesamte Komponente
- `parentselectable {Boolean}` wird ausgewählbar sein (Default: `true`)

__Datenstruktur__:

- Objekt Array
- Das Objekt muss `id:String` enthalten, das die Haupt-ID jedes Elementes ist
- Objekt muss `name:String` und `children:[another similar object]` oder `children:null` enthalten (mit keinem Kind)
- Objekt muss `html:String` enthalten, wird als Inhalt renderiert (wenn es nicht existiert, dann wird `name` renderiert)
- Das Objekt kann `..., classname: 'css_custom_class' }` enthalten, es fügt einen CSS-Klasse auf das Element "Label" hinzu
- Objekte unterstützen Eigentum `actions: { expand: true, drop: true, move: true }`

Verwenden Sie es mit `<ui-component name="treeview">`. 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
<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>
```