j-Tree

Konfiguracja:

• first {Boolean} wybiera pierwszą pozycję drzewa, wstępnie: true (opcjonalnie)
• exec {String} wymagany: link do funkcji, ta funkcja jest wykonywana, gdy w drzewie jest wybrany przycisk
• Po zmianie źródła danych autoreset {Boolean} ponownie określa stan (opcjonalny, domyślny: false)
• Klasa wyboru selected {String} (opcjonalna, domyślna: selected)
• checked {String} opcjonalny, ścieżka do function(arr, component) lub ścieża do property
• checkednested {Boolean} opcjonalny, sprawdza wszystkie składniki (default: true)
• upload {String} opcjonalny, ścieżka do function(item, files) (można wyciągnąć i spuścić pliki)
• dragdrop {String} opcjonalny, ścieżka do function(item, target_item, itemel, targetel) (umożliwia wyciągnięcie i spadek elementów)
• options {String} opcjonalny, ścieżka do function(item, el) umożliwia mały przycisk dla menu kontekstu w linii dla każdego elementu
• rename {String} opcjonalny, droga do function(item, newname, fn_accept(true))
• unselectexpand {Boolean} opcjonalny, może unselect wybrane elementy, gdy użytkownik kliknie na rozszerzający się element (default: false)
• reselect {Boolean} opcjonalny, ocenia exec ponownie, jeśli drzewo jest odświeżone (default: false)
• Opcjonalny selectexpand {Boolean}, umożliwia dodanie klasy selected do elementów rozszerzających (default: false)
• Ikonę iconoptions {String} do opcji (default: ti ti-ellipsis-h)
• expanded {Boolean} rozszerza wszystkie dzieci (default: false)
• NEW: contextmenu {String} opcjonalny, droga do function(item, el) umożliwia menu kontekstu myszy
• NEW: wartość key {String} może być używana jako index w poniższych metodach (default: path)

Struktura danych:

• Obiekt Array
• Obiekt musi zawierać name:String i children:[another similar object] lub children:null (bez dzieci)
• Obiekt może zawierać ..., icon: 'home' }, może zmienić ikonę pliku
• Element obiektu może zawierać ..., classname: 'css_custom_class' }, dodaje klasę CSS do elementu "label"
• Obiekt może zawierać etykiety ..., html: 'RAW_HTML' {String} HTML zamiast pola name

Metody:

• component.expand([index]) - rozszerza węzły index lub all (bez definicji index)
• component.collapse([index]) - kolapsy index lub all (z żadną definicją) indexi nody
• component.clear() - oczyszcza cache do odświeżania źródła
• component.select(index) - wybieranie nodu
• component.unselect() - niewybrana węzła
• component.rename(index) - wyświetla input dla renamingów nazw (pracuje z config.rename)

Dobrze wiedzieć:

Setter automatycznie rozszerza każdy obiekt poprzez dodanie właściwości .$pointer z indeksem drzewa.

Użyj go z <ui-component name="tree">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

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