j-TreeView

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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.

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>