# j-TreeView

> Ez az összetevő csak egy béta előzetes. még építkezés alatt van.

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

Ez az összetevő csak egy béta előzetes. még építkezés alatt van.


__konfiguráció__:

- `parent {String}` egy tartály állandó magasságú, lehet `window`. alapértelmezett érték: `parent` elem.
- `visibleY {Boolean}` még mindig mutatja a `Y` scrollbar (default: `true`)
- `movable {Boolean}` lehetővé teszi a csomópontok mozgását (default: `true`)
- A `cachexpand {Boolean}` emlékeztet az előző állapotra (default: `true`)
- A `arrows {Boolean}` lehetővé teszi a mappákat (default: `true`)
- `expanded {Boolean}` bővíti az összes csomót (default: `false`)
- `autosort {Boolean}` típusú csomópontok szerint `item.sort` (ha létezik) vagy `item.name` (ha van), alapértelmezett: `true`
- `margin {Number}` felső / alsó margin együtt (default: `0`)
- `marginxs {Number}` felső / alsó margin együtt a `xs` képernyő szélessége
- `marginsm` felső / alsó margin együtt a `sm` képernyő szélessége
- `marginmd` felső / alsó margin együtt a `md` képernyő szélessége
- `marginlg` felső / alsó margin együtt a `lg` képernyő szélessége
- A `disabled {Boolean}` eltávolítja az egész összetevőt
- A `parentselectable {Boolean}` szülő kiválasztható (default: `true`)

__Adatkezelő struktúra__:

- objektum array
- Az objektumnak tartalmaznia kell a `id:String`-t, amely minden elem fő azonosítója.
- Az objektumnak tartalmaznia kell a `name:String` és a `children:[another similar object]` vagy a `children:null` (a gyermekek nélkül)
- Az objektumnak tartalmaznia kell a `html:String`-t tartalomként (ha nem létezik, akkor a `name`-t adja át)
- Az objektum elem tartalmazhat `..., classname: 'css_custom_class' }`, hozzáad egy CSS osztály a "label" elem
- Az objektum támogatja a tulajdonságot `actions: { expand: true, drop: true, move: true }`

Használja a `<ui-component name="treeview">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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