j-Tree

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

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.

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>