# j-TreeView

> Această componentă este doar o preview beta. este încă în construcție.

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

Această componentă este doar o preview beta. este încă în construcție.


__Configurarea__:

- `parent {String}` Un container cu înălțime fixă poate fi `window`Valoarea deficitară: `parent` elementului .
- `visibleY {Boolean}` Întotdeauna arată `Y` Scrollbar (defaultă pentru: `true`)
- `movable {Boolean}` permite mișcarea nodurilor (default: `true`)
- `cachexpand {Boolean}` amintește de starea anterioară (defață: `true`)
- `arrows {Boolean}` permite aruncările pentru dosare (default: `true`)
- `expanded {Boolean}` extinde toate nodurile (default: `false`)
- Node de tip `autosort {Boolean}` în conformitate cu `item.sort` (dacă există) sau `item.name` (daca există), standard: `true`
- `margin {Number}` top/bottom margin împreună (default: `0`)
- `marginxs {Number}` top/bottom margin împreună pentru largimea ecranului `xs`
- `marginsm` top/bottom margin împreună pentru largimea ecranului `sm`
- `marginmd` top/bottom margin împreună pentru largimea ecranului `md`
- `marginlg` top/bottom margin împreună pentru largimea ecranului `lg`
- `disabled {Boolean}` dezactivă întregul component
- `parentselectable {Boolean}` va fi selectabil (default: `true`)

__Structura datelor__:

- Obiectivul Array
- Obiectul trebuie să conțină `id:String`, care este ID-ul principal al fiecărui element.
- Obiectul trebuie să conțină `name:String` și `children:[another similar object]` sau `children:null` (cu copii)
- Obiectul trebuie să conțină `html:String` este renderat ca conținut (dacă nu există, atunci `name` este renderată)
- Obiectul poate conține `..., classname: 'css_custom_class' }`, adăuga o clasă CSS la elementul "label"
- Obiectul suportă proprietatea `actions: { expand: true, drop: true, move: true }`

Utilizați-l cu `<ui-component name="treeview">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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