j-Tree

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 indexNodi
• 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.

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