j-TreeView

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Deze component is slechts een beta-preview. het is nog steeds in de bouw.

Configuratie:

parent {String} Een container met een vaste hoogte kan windowDe standaardwaarde: parent Het element.
visibleY {Boolean} toont nog steeds de Y scrollbar (default: true)
movable {Boolean} maakt het mogelijk om de noden te bewegen (default: true)
cachexpand {Boolean} herinnert zich aan de vorige staat (default: true)
arrows {Boolean} maakt het mogelijk om schroeven te maken voor mappen (default: true)
expanded {Boolean} breidt alle knooppunten uit (default: false)
autosort {Boolean} soorten knoten volgens item.sort (als er bestaat) of item.name (als het bestaat), standaard: true
margin {Number} top/bottom marge samen (default: 0)
marginxs {Number} top/bottom margin samen voor xs schermbreedte
marginsm top/bottom margin samen voor sm schermbreedte
marginmd top/bottom margin samen voor md schermbreedte
marginlg top/bottom margin samen voor lg schermbreedte
disabled {Boolean} de hele component uitstort
parentselectable {Boolean} ouder zal selectief zijn (default: true)

De gegevensstructuur:

Objecten Array
Het object moet id:String bevatten, wat de belangrijkste ID van elk item is.
Het object moet name:String en children:[another similar object] of children:null bevatten (met geen kinderen)
Het object moet html:String bevatten (als het niet bestaat dan wordt name gepresenteerd)
Object item kan ..., classname: 'css_custom_class' } bevatten, het voegt een CSS-klasse toe aan het element "Label"
Object item ondersteunt eigendom actions: { expand: true, drop: true, move: true }

Gebruik het met <ui-component name="treeview">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>