j-TreeView

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Denna komponent är bara en beta-preview. det är fortfarande under konstruktion.

Konfigurera:

parent {String} en behållare med fast höjd, kan vara window. standardvärde: elementet parent.
visibleY {Boolean} visar fortfarande Y scrollbar (default: true)
movable {Boolean} möjliggör rörelse av noder (default: true)
cachexpand {Boolean} påminner om föregående tillstånd (default: true)
arrows {Boolean} möjliggör strängar för mappar (default: true)
expanded {Boolean} expanderar alla noder (default: false)
Nötter av autosort {Boolean}-typer enligt item.sort (om det finns) eller item.name (om den finns), standard: true
margin {Number} topp/bottom marginal tillsammans (default: 0)
marginxs {Number} topp/bottom marginal tillsammans för xs skärmbredd
marginsm topp/bottom marginal tillsammans för sm skärmbredd
marginmd topp/bottom marginal tillsammans för md skärmbredd
marginlg topp/bottom marginal tillsammans för lg skärmbredd
disabled {Boolean} inaktiverar hela komponenten
parentselectable {Boolean} förälder kommer att vara valbar (default: true)

Datastruktur:

Objekt Array
Objektet måste innehålla id:String, vilket är huvudidentifieringen för varje objekt.
Objektet måste innehålla name:String och children:[another similar object] eller children:null (med inga barn)
Objektet måste innehålla html:String renderas som innehåll (om det inte finns så är name renderad)
Objektet kan innehålla ..., classname: 'css_custom_class' }, det lägger till en CSS-klass på elementet "label"
Objektet stödjer fastighet actions: { expand: true, drop: true, move: true }

Använd den med <ui-component name="treeview">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>