j-TreeView

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Този компонент е само бета преглед. тя все още е в процес на строителство.

Конфигуриране:

parent {String} Контейнер с фиксирана височина, може да бъде windowДефинирана стойност: parent Елементът
visibleY {Boolean} все още показва Y скалбар (дефолт: true)
movable {Boolean} позволява преместването на възли (предварително: true)
cachexpand {Boolean} напомня на предишното състояние (предварително: true)
arrows {Boolean} позволява стрелки за папки (дефолт: true)
expanded {Boolean} разширява всички възли (дефолт: false)
Нюдовете от видове autosort {Boolean} според item.sort (ако има) или item.name (ако съществува), по подразбиране: true
margin {Number} Върху и надолу марж (предварително: 0)
marginxs {Number} топ/долна маржа заедно за ширина на екрана xs
marginsm топ/долна маржа заедно за ширина на екрана sm
marginmd топ/долна маржа заедно за ширина на екрана md
marginlg топ/долна маржа заедно за ширина на екрана lg
disabled {Boolean} отключва целия компонент
parentselectable {Boolean} Родителите ще бъдат избираеми (предварително: true)

Структура на данните:

Обектът Array
Обектът трябва да съдържа id:String, което е основният идентификатор на всеки елемент.
Предметът трябва да съдържа name:String и children:[another similar object] или children:null (без деца)
Обектът трябва да съдържа html:String се представя като съдържание (ако не съществува, тогава name се представя)
Обектът може да съдържа ..., classname: 'css_custom_class' }, той добавя клас CSS към елемента "Етикет"
Обектът поддържа собственост actions: { expand: true, drop: true, move: true }

Използвайте го с <ui-component name="treeview">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>