Modifier le fichier

jsTree avec Multiselect

Dans le cas d'un jsTree multiselect, le chargement initial est fait de manière asynchrone.

En effet, la valeur du champ SELECTED de l'URL peut-être extrêment longue si beaucoup d'éléments sont sélectionnés. Les URLs étant limitées en longueur, il a été nécessaire de changer le chargement dans ce cas précis en le rendant asynchrone pour :

• les groupes
• les rubriques
• les structures

Les autres données représentées en arbre n'étant pas en multiselect.

Mécanisme

Avant le chargement de l'iFrame, deux variables sont ajoutées aux sessionStorage en javascript :

sessionStorage.setItem('jsTreeSelection', $input.val()); // Valeur de la sélection
sessionStorage.setItem('jsTreeInitUrl', $component.data('urlinittree')); // URL de chargement des données

• jsTreeSelection : contient la liste des éléments sélectionnés dans l'arbre
• jsTreeInitUrl : contient l'URL du endpoint permettant de récupérer l'initialisation de l'arbre

Coté jsTree, au chargement, si une variable de session jsTreeSelection existe alors, l'URL jsTreeInitUrl est appelée en POST avec en body la valeur de jsTreeSelection. Les variables sont immédiatement supprimées pour éviter de se chevaucher entre deux utilisations de jsTree.

Le résultat permet d'initialiser l'arbre en ouvrant les nœuds nécessaires et en cochant les nœuds sélectionnés.

Un overlay avec un spinner est affiché le temps de ce chargement afin d'indiquer à l'utilisateur de patienter.

Initialisation de l'arbre

Il y a deux méthodes d'initialisation de l'arbre

setState

L'utilisation de set_state du jsTree. Les données injectées sont seulement les états des différents nœuds : sélectionné et/ou ouvert.

setData

L'utilisation de create_node du jsTree. Les données injectées sont complètes, c'est à dire qu'il y a l'état ET les données des nœuds (texte, ID, etc.)