# j-Tree

> Setter étend automatiquement chaque objet en ajoutant une propriété de pointer .$ avec un index d'arbre.

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

__Configuration__ :

- `first {Boolean}` sélectionne le premier élément d'arbre, par défaut: `true` (optionnel)
- `exec {String}` __required__: lien vers une fonction, cette fonction est exécutée lorsque le node est sélectionné dans l'arbre
- `autoreset {Boolean}` remet l'état lorsque la source de données est modifiée (optionnelle, par défaut: `false`)
- `selected {String}` classe sélectionnée (optionnelle, défaut : `selected`)
- `checked {String}` Optionnel, un chemin à `function(arr, component)` ou le chemin à `property`
- `checkednested {Boolean}` optionnel, vérifie tous les éléments nés (défaut: `true`)
- `upload {String}` optionnel, un chemin vers `function(item, files)` (autorise les fichiers de drag & drop)
- `dragdrop {String}` optionnel, un chemin vers `function(item, target_item, itemel, targetel)` (autorise les éléments de tir et de jeter)
- `options {String}` optionnel, un chemin vers `function(item, el)` permet un petit bouton pour un menu de contexte en ligne pour chaque élément
- `rename {String}` en option, un chemin vers `function(item, newname, fn_accept(true))`
- `unselectexpand {Boolean}` optionnel, peut `unselect` élément sélectionné lorsque l'utilisateur clique sur l'élément élargi (defaut: `false`)
- `reselect {Boolean}` optionnel, évalue encore `exec` si l'arbre est rafraîchit (defaut: `false`)
- `selectexpand {Boolean}` facultatif, permettant l'ajout de la classe `selected` aux éléments expansibles (défaut: `false`)
- Icône `iconoptions {String}` à options (defaut : `ti ti-ellipsis-h`)
- `expanded {Boolean}` élargit tous les enfants (defaut: `false`)
- __NEW__: `contextmenu {String}` facultatif, un chemin vers `function(item, el)` permet le menu de contexte de la souris
- __NEW__: `key {String}` une valeur peut être utilisée comme `index` dans les méthodes ci-dessous (defaut: `path`)

__Structure des données__:

- Objectif Array
- L'objet doit contenir `name:String` et `children:[another similar object]` ou `children:null` (sans enfants)
- L'objet peut contenir `..., icon: 'home' }`, il peut changer une icône de fichier
- L'élément d'objet peut contenir `..., classname: 'css_custom_class' }`, il ajoute une classe CSS à l'élémen "label"
- L’objet peut contenir `..., html: 'RAW_HTML'` {String} rend les tags HTML au lieu de `name` champs

__Méthodes__ :

- `component.expand([index])` - élargit les nœuds `index` ou `all` (avec pas de `index`)
- `component.collapse([index])` - collapse des nœuds `index` ou `all` (avec pas de `index`)
- `component.clear()` - nettoie un cache pour rafraîchir la source
- `component.select(index)` - Sélectionnez le node
- `component.unselect()` - Node non sélectionnée
- `component.rename(index)` - affiche `input` pour la renommée de nom (il fonctionne avec `config.rename`)

__Bon à savoir__ :

Setter étend automatiquement chaque objet en ajoutant une propriété `.$pointer` avec un index d'arbre.

Utilisez-le avec `<ui-component name="tree">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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