# j-TreeView

> Ten element jest tylko beta preview. jest nadal w trakcie budowy.

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

Ten element jest tylko beta preview. jest nadal w trakcie budowy.


__Konfiguracja__:

- `parent {String}` - pojemnik o stałej wysokości, może być `window`. wartość domyślna: element `parent`.
- `visibleY {Boolean}` wciąż wyświetla pasek skręcania `Y` (default: `true`)
- `movable {Boolean}` umożliwia poruszanie się węzłów (default: `true`)
- `cachexpand {Boolean}` przypomina stan poprzedniego (default: `true`)
- `arrows {Boolean}` umożliwia strzałki dla folderów (default: `true`)
- `expanded {Boolean}` rozszerza wszystkie węzły (default: `false`)
- Poziomy `autosort {Boolean}` według `item.sort` (jeśli istnieją) lub `item.name` (jeżeli istnieją), wstępne: `true`
- `margin {Number}` górna / dolna marża razem (default: `0`)
- `marginxs {Number}` górna / dolna margina razem dla szerokości ekranu `xs`
- `marginsm` górna / dolna margina razem dla szerokości ekranu `sm`
- `marginmd` górna / dolna margina razem dla szerokości ekranu `md`
- `marginlg` górna / dolna margina razem dla szerokości ekranu `lg`
- `disabled {Boolean}` wyłącza cały składnik
- Rodzice `parentselectable {Boolean}` będą wybierani (default: `true`)

__Struktura danych__:

- Obiekt Array
- Obiekt musi zawierać `id:String`, co jest głównym identyfikatorem każdego elementu.
- Obiekt musi zawierać `name:String` i `children:[another similar object]` lub `children:null` (bez dzieci)
- Obiekt musi zawierać `html:String` jest renderowany jako treść (jeśli nie istnieje, to `name` jest renderowane)
- Element obiektu może zawierać `..., classname: 'css_custom_class' }`, dodaje klasę CSS do elementu "label"
- Obiekt element wspiera własność `actions: { expand: true, drop: true, move: true }`

Użyj go z `<ui-component name="treeview">`Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu `DEF.fallback` (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>
```