# j-TreeView

> Ce composant n’est qu’une prévision bêta, il est encore en construction.

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

Ce composant n’est qu’une prévision bêta, il est encore en construction.


__Configuration__ :

- `parent {String}` un conteneur à hauteur fixe, peut être `window`. Valeur par défaut : élément `parent`.
- `visibleY {Boolean}` Toujours montrer `Y` Le scrollbar (defaut) : `true`)
- `movable {Boolean}` permet le déplacement des nœuds (defaut: `true`)
- `cachexpand {Boolean}` rappelle l'état précédent (defaut : `true`)
- `arrows {Boolean}` permet des armoires pour les dossiers (defaut: `true`)
- `expanded {Boolean}` élargit tous les nœuds (defaut: `false`)
- Nodeurs de type `autosort {Boolean}` selon `item.sort` (si existent) ou `item.name` (si existe), par défaut: `true`
- `margin {Number}` top/bottom marge ensemble (defaut: `0`)
- La marge de haut et bas de `marginxs {Number}` pour la largeur d'écran `xs`
- La marge de haut et bas de `marginsm` pour la largeur d'écran `sm`
- La marge de haut et bas de `marginmd` pour la largeur d'écran `md`
- La marge de haut et bas de `marginlg` pour la largeur d'écran `lg`
- `disabled {Boolean}` désactive l'ensemble du composant
- `parentselectable {Boolean}` parent sera sélectionné (defaut: `true`)

__Structure des données__:

- Objectif Array
- L'objet doit contenir le `id:String` qui est l'ID principal de chaque élément
- L'objet doit contenir `name:String` et `children:[another similar object]` ou `children:null` (sans enfants)
- L'objet doit contenir `html:String` est rendu comme un contenu (si il n'existe pas, alors `name` est rendue)
- L'élément d'objet peut contenir `..., classname: 'css_custom_class' }`, il ajoute une classe CSS à l'élémen "label"
- L'objet supporte la propriété `actions: { expand: true, drop: true, move: true }`

Utilisez-le avec `<ui-component name="treeview">`. 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
<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>
```