# j-Tree

> Setter extinde în mod automat fiecare obiect prin adăugarea proprietății .$pointer cu un index al copacului.

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

__Configurarea__:

- `first {Boolean}` selectează primul element din lemn, în mod implicit: `true` (opțional)
- `exec {String}` __required__: legătura cu o funcție, această funcție este executată atunci când nodul este selectat în copac
- `autoreset {Boolean}` reîntoarce starea atunci când sursa de date este schimbată (opțional, standard: `false`)
- Clasa selectată `selected {String}` (opțional, standard: `selected`)
- `checked {String}` opțional, o cale la `function(arr, component)` sau o cale spre `property`
- `checkednested {Boolean}` opțional, verifică toate elementele nestate (default: `true`)
- `upload {String}` opțional, o cale la `function(item, files)` (permiteți să vă retrageți și să aruncați fișiere)
- `dragdrop {String}` opțional, o cale către `function(item, target_item, itemel, targetel)` (permite obiecte de retragere și descărcare)
- `options {String}` opțional, o cale la `function(item, el)` permite un mic buton pentru un meni de context inline pentru fiecare element
- `rename {String}` opțional, o cale către `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` opțional, poate fi selectat elementul `unselect` atunci când utilizatorul face clic pe elementul extins (default: `false`)
- `reselect {Boolean}` opțional, evaluează din nou `exec` dacă copacul este refrescat (default: `false`)
- `selectexpand {Boolean}` opțional, permite adăugarea clasei `selected` la elemente extinse (default: `false`)
- Iconul `iconoptions {String}` la opțiuni (default: `ti ti-ellipsis-h`)
- `expanded {Boolean}` extinde toate copiii (default: `false`)
- __NEW__: `contextmenu {String}` opțional, o cale la `function(item, el)` permite meniul de context al mouse-ului
- __NEW__: `key {String}` o valoare poate fi utilizată ca `index` în metodele de mai jos (default: `path`)

__Structura datelor__:

- Obiectivul Array
- Obiectul trebuie să conțină `name:String` și `children:[another similar object]` sau `children:null` (cu copii)
- Obiectul poate conține `..., icon: 'home' }`, poate schimba un icon de fișier
- Obiectul poate conține `..., classname: 'css_custom_class' }`, adăuga o clasă CSS la elementul "label"
- Obiectul poate conține `..., html: 'RAW_HTML'` {String} render HTML tags în loc de `name` câmpuri

__Metode__:

- `component.expand([index])` - extindere `index` sau `all` (cu nici o definiţie `index`noduri
- `component.collapse([index])` - colapsuri `index` sau `all` (cu nici o definiţie `index`noduri
- `component.clear()` - curăță un cache pentru refrescă sursă
- `component.select(index)` - selectați nodul
- `component.unselect()` - nodul neîndeplinit
- `component.rename(index)` - afișează `input` pentru renumirea numelui (funcționează cu `config.rename`)

__bine să știi__:

Setter extinde automat fiecare obiect prin adăugarea proprietății `.$pointer` cu un index al copacului.

Utilizați-l cu `<ui-component name="tree">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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