# j-Tree

> A Setter automatikusan kiterjeszti az egyes objektumokat, hozzáadva a .$ mutató tulajdonságot egy fa indexrel.

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

__konfiguráció__:

- `first {Boolean}` kiválasztja az első fa elemet, alapértelmezett: `true` (opcionális)
- `exec {String}` __required__: link egy funkcióhoz, ez a funkció akkor fut be, amikor a csomópont kiválasztódik a fa
- A `autoreset {Boolean}` állapota az adatok forrásának módosításakor ismétlődik (opcionális, alapértelmezett: `false`)
- `selected {String}` kiválasztott osztály (opcionális, alapértelmezett: `selected`)
- `checked {String}` Választható, egy út a `function(arr, component)` vagy az út a `property`
- `checkednested {Boolean}` opcionális, ellenőrizze az összes szeletelt elemet (default: `true`)
- `upload {String}` opcionális, egy út a `function(item, files)` (engedélyezi a húzási és dobási fájlokat)
- `dragdrop {String}` opcionális, egy út a `function(item, target_item, itemel, targetel)` (engedélyezi a húzás és a dobás elemeket)
- `options {String}` opcionális, egy út a `function(item, el)` lehetővé teszi egy kis gombot egy inline kontextus menü minden elem
- `rename {String}` opcionális, egy út a `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` opcionális, a `unselect` kiválasztott elemet, amikor a felhasználó kattintson a bővíthető elemre (default: `false`)
- `reselect {Boolean}` opcionális, újra értékelik a `exec` ha a fa frissül (default: `false`)
- `selectexpand {Boolean}` opcionális, lehetővé teszi a `selected` osztály hozzáadását bővíthető elemekhez (default: `false`)
- `iconoptions {String}` ikon az opciókhoz (default: `ti ti-ellipsis-h`)
- A `expanded {Boolean}` minden gyermeket kiterjeszti (default: `false`)
- __NEW__: `contextmenu {String}` opcionális, egy út a `function(item, el)` lehetővé teszi az egér kontextusmenü
- __NEW__: `key {String}` az alábbi módszerekben a `index` értékként használható (első szabvány: `path`)

__Adatkezelő struktúra__:

- objektum array
- Az objektumnak tartalmaznia kell a `name:String` és a `children:[another similar object]` vagy a `children:null` (a gyermekek nélkül)
- Az objektum elem tartalmazhat `..., icon: 'home' }`, megváltoztathatja a fájl ikon
- Az objektum elem tartalmazhat `..., classname: 'css_custom_class' }`, hozzáad egy CSS osztály a "label" elem
- Az objektumok tartalmaznak `..., html: 'RAW_HTML'` {String} renders HTML címkék helyett `name` mező

__módszerek__:

- `component.expand([index])` - kiterjeszti a `index` vagy a `all` csomópontokat (nincs meghatározott `index`)
- `component.collapse([index])` - a `index` vagy a `all` csomópontok összeomlása (nem meghatározott `index`)
- `component.clear()` - tisztítja a cache frissítéséhez
- `component.select(index)` - kiválasztja a csomót
- `component.unselect()` - nem kiválasztott csomópont
- `component.rename(index)` - mutatja a `input` nevét (ez működik a `config.rename`)

__Jó tudni__:

A Setter automatikusan kiterjeszti az egyes objektumokat a `.$pointer` tulajdonság hozzáadásával egy fa indexrel.

Használja a `<ui-component name="tree">`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
<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>
```