j-TreeView

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Această componentă este doar o preview beta. este încă în construcție.

Configurarea:

parent {String} Un container cu înălțime fixă poate fi windowValoarea deficitară: parent elementului .
visibleY {Boolean} Întotdeauna arată Y Scrollbar (defaultă pentru: true)
movable {Boolean} permite mișcarea nodurilor (default: true)
cachexpand {Boolean} amintește de starea anterioară (defață: true)
arrows {Boolean} permite aruncările pentru dosare (default: true)
expanded {Boolean} extinde toate nodurile (default: false)
Node de tip autosort {Boolean} în conformitate cu item.sort (dacă există) sau item.name (daca există), standard: true
margin {Number} top/bottom margin împreună (default: 0)
marginxs {Number} top/bottom margin împreună pentru largimea ecranului xs
marginsm top/bottom margin împreună pentru largimea ecranului sm
marginmd top/bottom margin împreună pentru largimea ecranului md
marginlg top/bottom margin împreună pentru largimea ecranului lg
disabled {Boolean} dezactivă întregul component
parentselectable {Boolean} va fi selectabil (default: true)

Structura datelor:

Obiectivul Array
Obiectul trebuie să conțină id:String, care este ID-ul principal al fiecărui element.
Obiectul trebuie să conțină name:String și children:[another similar object] sau children:null (cu copii)
Obiectul trebuie să conțină html:String este renderat ca conținut (dacă nu există, atunci name este renderată)
Obiectul poate conține ..., classname: 'css_custom_class' }, adăuga o clasă CSS la elementul "label"
Obiectul suportă proprietatea actions: { expand: true, drop: true, move: true }

Utilizați-l cu <ui-component name="treeview">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>