# j-TreeView

> Denna komponent är bara en beta-preview. det är fortfarande under konstruktion.

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

Denna komponent är bara en beta-preview. det är fortfarande under konstruktion.


__Konfigurera__:

- `parent {String}` en behållare med fast höjd, kan vara `window`. standardvärde: elementet `parent`.
- `visibleY {Boolean}` visar fortfarande `Y` scrollbar (default: `true`)
- `movable {Boolean}` möjliggör rörelse av noder (default: `true`)
- `cachexpand {Boolean}` påminner om föregående tillstånd (default: `true`)
- `arrows {Boolean}` möjliggör strängar för mappar (default: `true`)
- `expanded {Boolean}` expanderar alla noder (default: `false`)
- Nötter av `autosort {Boolean}`-typer enligt `item.sort` (om det finns) eller `item.name` (om den finns), standard: `true`
- `margin {Number}` topp/bottom marginal tillsammans (default: `0`)
- `marginxs {Number}` topp/bottom marginal tillsammans för `xs` skärmbredd
- `marginsm` topp/bottom marginal tillsammans för `sm` skärmbredd
- `marginmd` topp/bottom marginal tillsammans för `md` skärmbredd
- `marginlg` topp/bottom marginal tillsammans för `lg` skärmbredd
- `disabled {Boolean}` inaktiverar hela komponenten
- `parentselectable {Boolean}` förälder kommer att vara valbar (default: `true`)

__Datastruktur__:

- Objekt Array
- Objektet måste innehålla `id:String`, vilket är huvudidentifieringen för varje objekt.
- Objektet måste innehålla `name:String` och `children:[another similar object]` eller `children:null` (med inga barn)
- Objektet måste innehålla `html:String` renderas som innehåll (om det inte finns så är `name` renderad)
- Objektet kan innehålla `..., classname: 'css_custom_class' }`, det lägger till en CSS-klass på elementet "label"
- Objektet stödjer fastighet `actions: { expand: true, drop: true, move: true }`

Använd den med `<ui-component name="treeview">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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