j-Tree

Konfigurace:

• first {Boolean} vybírá první stromový položka, dle předvolby: true (opční)
• exec {String} potřebné: odkaz na funkci, tato funkce se provádí, když je nůž vybrán v stromu
• autoreset {Boolean} obnovuje stav, když se zdroj údajů mění (volitelně: false)
• Vybraná třída selected {String} (volitelná, výchozí: selected)
• checked {String} Volitelně, cesta k function(arr, component) Nebo cesta k property
• checkednested {Boolean} volitelně, kontroluje všechny nektované položky (předvolené: true)
• upload {String} volitelně, cesta k function(item, files) (používejte přepínání a spuštění souborů)
• dragdrop {String} volitelně, cesta k function(item, target_item, itemel, targetel) (používejte drahý a drop položky)
• options {String} volitelně, cesta k function(item, el) umožňuje malý tlačítko pro vnitřní kontextový menu pro každý položku
• rename {String} volitelný, cesta k function(item, newname, fn_accept(true))
• unselectexpand {Boolean} je volitelný, může být položka unselect vybrána, když uživatel klikne na rozšířitelnou položku (default: false)
• reselect {Boolean} volitelně, hodnocení exec znovu, pokud je strom osvěžován (podmínkou: false)
• selectexpand {Boolean} volitelně, umožňuje přidání třídy selected k rozšířitelným položkám (podmínkou: false)
• iconoptions {String} ikona pro možnosti (předvolené: ti ti-ellipsis-h)
• expanded {Boolean} rozšiřuje všechny děti (předvolené: false)
• NEW: contextmenu {String} volitelný, cesta k function(item, el) umožňuje kontextový menu myši
• NEW: hodnotu key {String} lze použít jako index v následujících metodách (předvolený: path)

Struktura dat:

• Objektová aréna
• Objekt musí obsahovat name:String a children:[another similar object] nebo children:null (s dětmi)
• Objekt může obsahovat ..., icon: 'home' }, může změnit souborovou ikonu
• Objekt může obsahovat ..., classname: 'css_custom_class' }, přidává třídu CSS na prvek "label"
• Předmět může obsahovat ..., html: 'RAW_HTML' {String} renderer HTML značky namísto pole name

Metody:

• component.expand([index]) - rozšiřuje uzly index nebo all (s žádným definovaným uzlem index)
• component.collapse([index]) - kolapsy index nebo all (s žádné definované index) uzly
• component.clear() - vyčistí cache pro osvěžení zdroje
• component.select(index) - vyberte nůž
• component.unselect() - nezvolený nůž
• component.rename(index) - zobrazuje input pro přejmenování jména (pracuje s config.rename)

Dobré vědět:

Setter automaticky rozšiřuje každý objekt přidáním vlastnosti .$pointer s indexem stromu.

Použijte ji s <ui-component name="tree">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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