j-Tree

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

• first {Boolean} избира първия дървен елемент, по подразбиране: true (опционално)
• exec {String} необходимо: връзка към функция, тази функция се изпълнява, когато възелът е избран в дървото
• autoreset {Boolean} пренасочва състоянието, когато източникът на данни се променя (опционално, по подразбиране: false)
• selected {String} избрана класа (опционално, по подразбиране: selected)
• checked {String} Опционален път към function(arr, component) или пътят към property
• checkednested {Boolean} опционално, проверява всички нежни елементи (предварително: true)
• upload {String} опция, пътят към function(item, files) (възможно е да се изтеглят и да се отърват файлове)
• dragdrop {String} опция, пътят към function(item, target_item, itemel, targetel) (възможно е да се изтеглят и да се отърват елементи)
• options {String} опционален, пътят към function(item, el) позволява малък бутон за вграден контекст меню за всеки елемент
• rename {String} опция, пътят към function(item, newname, fn_accept(true))
• unselectexpand {Boolean} е опционален, може да се избере unselect елемент, когато потребителят кликне върху разширяемия елемент (предварително: false)
• reselect {Boolean} опционално, оценява exec отново, ако дървото е освежено (предварително: false)
• selectexpand {Boolean} опционално, позволява да се добавят класове selected към разширими елементи (предварително: false)
• Икона на iconoptions {String} към опциите (предварително: ti ti-ellipsis-h)
• expanded {Boolean} разширява всички деца (дефолт: false)
• NEW: contextmenu {String} опционално, пътят към function(item, el) позволява контекстния меню на мишката
• NEW: key {String} стойност може да се използва като index в методите по-долу (предварително: path)

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

• Обектът Array
• Предметът трябва да съдържа name:String и children:[another similar object] или children:null (без деца)
• Обектът може да съдържа ..., icon: 'home' }, той може да промени иконата на файла
• Обектът може да съдържа ..., classname: 'css_custom_class' }, той добавя клас CSS към елемента "Етикет"
• Обектът може да съдържа ..., html: 'RAW_HTML' {String} рендери HTML етикети вместо полето name

Методи:

• component.expand([index]) - разширява index или all (без определено index) възли
• component.collapse([index]) - счупване на index или all (без определено index) възли
• component.clear() - почиства кеш за освежаване на източника
• component.select(index) - изберете възел
• component.unselect() - неизбрани възли
• component.rename(index) - показва input за преименуване на име (това работи с config.rename)

Добре е да се знае:

Setter автоматично разширява всеки обект, като добавя свойството на .$pointer с дървен индекс.

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