j-TreeView

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

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.

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>