j-TreeView

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Ten element jest tylko beta preview. jest nadal w trakcie budowy.

Konfiguracja:

parent {String} - pojemnik o stałej wysokości, może być window. wartość domyślna: element parent.
visibleY {Boolean} wciąż wyświetla pasek skręcania Y (default: true)
movable {Boolean} umożliwia poruszanie się węzłów (default: true)
cachexpand {Boolean} przypomina stan poprzedniego (default: true)
arrows {Boolean} umożliwia strzałki dla folderów (default: true)
expanded {Boolean} rozszerza wszystkie węzły (default: false)
Poziomy autosort {Boolean} według item.sort (jeśli istnieją) lub item.name (jeżeli istnieją), wstępne: true
margin {Number} górna / dolna marża razem (default: 0)
marginxs {Number} górna / dolna margina razem dla szerokości ekranu xs
marginsm górna / dolna margina razem dla szerokości ekranu sm
marginmd górna / dolna margina razem dla szerokości ekranu md
marginlg górna / dolna margina razem dla szerokości ekranu lg
disabled {Boolean} wyłącza cały składnik
Rodzice parentselectable {Boolean} będą wybierani (default: true)

Struktura danych:

Obiekt Array
Obiekt musi zawierać id:String, co jest głównym identyfikatorem każdego elementu.
Obiekt musi zawierać name:String i children:[another similar object] lub children:null (bez dzieci)
Obiekt musi zawierać html:String jest renderowany jako treść (jeśli nie istnieje, to name jest renderowane)
Element obiektu może zawierać ..., classname: 'css_custom_class' }, dodaje klasę CSS do elementu "label"
Obiekt element wspiera własność actions: { expand: true, drop: true, move: true }

Użyj go z <ui-component name="treeview">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.

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>