# j-TreeView

> Questo componente è solo una preview beta. è ancora in costruzione.

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

Questo componente è solo una preview beta. è ancora in costruzione.


__Configurazione__:

- `parent {String}` un contenitore con altezza fissa, può essere `window`. valore predefinito: elemento `parent`.
- `visibleY {Boolean}` mostra ancora la barra di scorrimento `Y` (default: `true`)
- `movable {Boolean}` consente il movimento dei nodi (default: `true`)
- `cachexpand {Boolean}` ricorda lo stato precedente (default: `true`)
- `arrows {Boolean}` consente i file per le cartelle (default: `true`)
- `expanded {Boolean}` espande tutti i nodi (default: `false`)
- Node di tipo `autosort {Boolean}` secondo `item.sort` (se esistente) o `item.name` (se esiste), predefinito: `true`
- `margin {Number}` marchio superiore / inferiore insieme (default: `0`)
- `marginxs {Number}` top/bottom margine insieme per la larghezza dello schermo `xs`
- `marginsm` top/bottom margine insieme per la larghezza dello schermo `sm`
- `marginmd` top/bottom margine insieme per la larghezza dello schermo `md`
- `marginlg` top/bottom margine insieme per la larghezza dello schermo `lg`
- `disabled {Boolean}` disabilita l'intero componente
- Il parente `parentselectable {Boolean}` sarà selezionato (default: `true`)

__Struttura dei dati__:

- L’oggetto Array
- L'oggetto deve contenere `id:String` che è l'ID principale di ogni elemento
- L'oggetto deve contenere `name:String` e `children:[another similar object]` o `children:null` (senza bambini)
- L'oggetto deve contenere `html:String` è renderito come contenuto (se non esiste allora `name` è renderato)
- L'elemento di oggetto può contenere `..., classname: 'css_custom_class' }`, aggiunge una classe CSS all'elemente "label"
- L'oggetto supporta la proprietà `actions: { expand: true, drop: true, move: true }`

Utilizzare con `<ui-component name="treeview">`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
<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>
```