# j-Tree

> Setter автоматично разширява всеки обект, като добавя .$-потенциална собственост с дървен индекс.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: bg
Content-SHA256: 677b125c813e025e529ebd20172f7732108c06465d1ed1a20ff64d269ce00e14
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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

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

```html example.html
<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>
```