j-TreeView

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Ez az összetevő csak egy béta előzetes. még építkezés alatt van.

konfiguráció:

parent {String} egy tartály állandó magasságú, lehet window. alapértelmezett érték: parent elem.
visibleY {Boolean} még mindig mutatja a Y scrollbar (default: true)
movable {Boolean} lehetővé teszi a csomópontok mozgását (default: true)
A cachexpand {Boolean} emlékeztet az előző állapotra (default: true)
A arrows {Boolean} lehetővé teszi a mappákat (default: true)
expanded {Boolean} bővíti az összes csomót (default: false)
autosort {Boolean} típusú csomópontok szerint item.sort (ha létezik) vagy item.name (ha van), alapértelmezett: true
margin {Number} felső / alsó margin együtt (default: 0)
marginxs {Number} felső / alsó margin együtt a xs képernyő szélessége
marginsm felső / alsó margin együtt a sm képernyő szélessége
marginmd felső / alsó margin együtt a md képernyő szélessége
marginlg felső / alsó margin együtt a lg képernyő szélessége
A disabled {Boolean} eltávolítja az egész összetevőt
A parentselectable {Boolean} szülő kiválasztható (default: true)

Adatkezelő struktúra:

objektum array
Az objektumnak tartalmaznia kell a id:String-t, amely minden elem fő azonosítója.
Az objektumnak tartalmaznia kell a name:String és a children:[another similar object] vagy a children:null (a gyermekek nélkül)
Az objektumnak tartalmaznia kell a html:String-t tartalomként (ha nem létezik, akkor a name-t adja át)
Az objektum elem tartalmazhat ..., classname: 'css_custom_class' }, hozzáad egy CSS osztály a "label" elem
Az objektum támogatja a tulajdonságot actions: { expand: true, drop: true, move: true }

Használja a <ui-component name="treeview">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>