# j-TreeView

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

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

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


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

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

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