# j-Tree

> Setter utökar automatiskt varje objekt genom att lägga till .$pointer egenskap med en trädindex.

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

__Konfigurera__:

- `first {Boolean}` väljer första trädet, standard: `true` (alternativ)
- `exec {String}` __required__: länk till en funktion, denna funktion utförs när noden är markerad i trädet
- `autoreset {Boolean}` återställer tillståndet när datakällan ändras (alternativt, standard: `false`)
- `selected {String}` valda klass (alternativ, standard: `selected`)
- `checked {String}` är valfritt, en väg till `function(arr, component)` eller vägen till `property`
- `checkednested {Boolean}` är valfritt, kontrollerar alla nycklade objekt (default: `true`)
- `upload {String}` valfritt, en väg till `function(item, files)` (tillåter drag & drop filer)
- `dragdrop {String}` valfritt, en väg till `function(item, target_item, itemel, targetel)` (tillåter drag & drop objekt)
- `options {String}` valfritt, en väg till `function(item, el)` möjliggör en liten knapp för en inline-kontextmeny för varje objekt
- `rename {String}` alternativ, en väg till `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` är valfritt, kan `unselect` markeras när användaren klickar på det expanderbara objektet (default: `false`)
- `reselect {Boolean}` är valfritt, utvärderar `exec` igen om trädet är uppfrisknat (default: `false`)
- `selectexpand {Boolean}` alternativ, möjliggör tillägg av `selected` klass till utvidgningsbara objekt (default: `false`)
- `iconoptions {String}`-ikon till alternativ (default: `ti ti-ellipsis-h`)
- `expanded {Boolean}` expanderar alla barn (default: `false`)
- __NEW__: `contextmenu {String}` valfritt, en väg till `function(item, el)` möjliggör muskontextmenyn
- __NEW__: `key {String}` ett värde kan användas som `index` i nedanstående metoder (default: `path`)

__Datastruktur__:

- Objekt Array
- Objektet måste innehålla `name:String` och `children:[another similar object]` eller `children:null` (med inga barn)
- Objektet kan innehålla `..., icon: 'home' }`, det kan ändra en filikon
- Objektet kan innehålla `..., classname: 'css_custom_class' }`, det lägger till en CSS-klass på elementet "label"
- Objekt objekt kan innehålla `..., html: 'RAW_HTML'` {String} renderer HTML-taggar istället för `name` fält

__Metoder__:

- `component.expand([index])` - expanderar `index` eller `all` (med ingen definierad `index`) noder
- `component.collapse([index])` - kollapsar `index` eller `all` (med ingen definierad `index`) noder
- `component.clear()` - rengör en cache för att uppfriska källan
- `component.select(index)` - Välj nötter
- `component.unselect()` - Oselekt noder
- `component.rename(index)` - visar `input` för namnrenamn (det fungerar med `config.rename`)

__Bra att veta__:

Setter utvidgar automatiskt varje objekt genom att lägga till `.$pointer`-egenskapen med en trädindex.

Använd den med `<ui-component name="tree">`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
<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>
```