# j-Tree

> Il seter estende automaticamente ogni oggetto aggiungendo la proprietà di .$pointer con un indice albero.

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

__Configurazione__:

- `first {Boolean}` seleziona il primo elemento di legno, predefinito: `true` (opzionale)
- `exec {String}` __required__: collegamento a una funzione, questa funzione viene eseguita quando il nodo è selezionato nell'albero
- `autoreset {Boolean}` riprende lo stato quando viene modificato la fonte dei dati (opzionale, predefinito: `false`)
- Classifica selezionata di `selected {String}` (opzionale, standard: `selected`)
- `checked {String}` Opzionale, un percorso per `function(arr, component)` o la strada per `property`
- `checkednested {Boolean}` opzionale, verifica tutti gli articoli innescati (default: `true`)
- `upload {String}` opzionale, un percorso a `function(item, files)` (autorizza i file di ritiro e drop)
- `dragdrop {String}` opzionale, un percorso a `function(item, target_item, itemel, targetel)` (autorizza gli articoli di tiratura e drop)
- `options {String}` opzionale, un percorso a `function(item, el)` consente un piccolo pulsante per un menu di contesto in linea per ogni elemento
- `rename {String}` opzionale, un percorso a `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` opzionale, può `unselect` eletto quando l'utente fa clic sull'oggetto estensibile (default: `false`)
- `reselect {Boolean}` opzionale, valuta di nuovo `exec` se l'albero è rinfrescato (default: `false`)
- `selectexpand {Boolean}` opzionale, consente di aggiungere la classe `selected` agli elementi estensibili (default: `false`)
- Icon `iconoptions {String}` per le opzioni (default: `ti ti-ellipsis-h`)
- `expanded {Boolean}` espande tutti i bambini (default: `false`)
- __NEW__: `contextmenu {String}` opzionale, un percorso a `function(item, el)` consente il menu di contesto del mouse
- __NEW__: `key {String}` un valore può essere utilizzato come `index` nei seguenti metodi (default: `path`)

__Struttura dei dati__:

- L’oggetto Array
- L'oggetto deve contenere `name:String` e `children:[another similar object]` o `children:null` (senza bambini)
- L'oggetto può contenere `..., icon: 'home' }`, può cambiare un'icona del file
- L'elemento di oggetto può contenere `..., classname: 'css_custom_class' }`, aggiunge una classe CSS all'elemente "label"
- Gli oggetti possono contenere `..., html: 'RAW_HTML'` {String} rendere le etichette HTML invece di `name` Il campo

__Metodi__:

- `component.expand([index])` - espande i nodi `index` o `all` (senza definizione di `index`)
- `component.collapse([index])` - collasso `index` o `all` (non definito `index`Nodi
- `component.clear()` - pulisce un cache per rinfrescare la fonte
- `component.select(index)` - seleziona il nodo
- `component.unselect()` - Node non selezionate
- `component.rename(index)` - mostra `input` per la rinascita del nome (funzionale con `config.rename`)

__Buono sapere__:

Il seter estende automaticamente ogni oggetto aggiungendo una proprietà di `.$pointer` con un indice albero.

Utilizzare con `<ui-component name="tree">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

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