j-Tree

konfiguráció:

• first {Boolean} kiválasztja az első fa elemet, alapértelmezett: true (opcionális)
• exec {String} required: link egy funkcióhoz, ez a funkció akkor fut be, amikor a csomópont kiválasztódik a fa
• A autoreset {Boolean} állapota az adatok forrásának módosításakor ismétlődik (opcionális, alapértelmezett: false)
• selected {String} kiválasztott osztály (opcionális, alapértelmezett: selected)
• checked {String} Választható, egy út a function(arr, component) vagy az út a property
• checkednested {Boolean} opcionális, ellenőrizze az összes szeletelt elemet (default: true)
• upload {String} opcionális, egy út a function(item, files) (engedélyezi a húzási és dobási fájlokat)
• dragdrop {String} opcionális, egy út a function(item, target_item, itemel, targetel) (engedélyezi a húzás és a dobás elemeket)
• options {String} opcionális, egy út a function(item, el) lehetővé teszi egy kis gombot egy inline kontextus menü minden elem
• rename {String} opcionális, egy út a function(item, newname, fn_accept(true))
• unselectexpand {Boolean} opcionális, a unselect kiválasztott elemet, amikor a felhasználó kattintson a bővíthető elemre (default: false)
• reselect {Boolean} opcionális, újra értékelik a exec ha a fa frissül (default: false)
• selectexpand {Boolean} opcionális, lehetővé teszi a selected osztály hozzáadását bővíthető elemekhez (default: false)
• iconoptions {String} ikon az opciókhoz (default: ti ti-ellipsis-h)
• A expanded {Boolean} minden gyermeket kiterjeszti (default: false)
• NEW: contextmenu {String} opcionális, egy út a function(item, el) lehetővé teszi az egér kontextusmenü
• NEW: key {String} az alábbi módszerekben a index értékként használható (első szabvány: path)

Adatkezelő struktúra:

• objektum array
• Az objektumnak tartalmaznia kell a name:String és a children:[another similar object] vagy a children:null (a gyermekek nélkül)
• Az objektum elem tartalmazhat ..., icon: 'home' }, megváltoztathatja a fájl ikon
• Az objektum elem tartalmazhat ..., classname: 'css_custom_class' }, hozzáad egy CSS osztály a "label" elem
• Az objektumok tartalmaznak ..., html: 'RAW_HTML' {String} renders HTML címkék helyett name mező

módszerek:

• component.expand([index]) - kiterjeszti a index vagy a all csomópontokat (nincs meghatározott index)
• component.collapse([index]) - a index vagy a all csomópontok összeomlása (nem meghatározott index)
• component.clear() - tisztítja a cache frissítéséhez
• component.select(index) - kiválasztja a csomót
• component.unselect() - nem kiválasztott csomópont
• component.rename(index) - mutatja a input nevét (ez működik a config.rename)

Jó tudni:

A Setter automatikusan kiterjeszti az egyes objektumokat a .$pointer tulajdonság hozzáadásával egy fa indexrel.

Használja a <ui-component name="tree">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.

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