Tree view evolué

Principe

Il faut développer des méthodes supplémentaires pour pouvoir le faire. Il va falloir en particulier modifier les méthodes 'isContainerOpen(…)' et 'toggleOpenState(…)'.

La première doit renvoyer "true" ou "false" pour dire au générateur de rendu si la branche et ouverte ou fermée. Et 'toggleOpenState(…)' sera appelée chaque fois que l'utilisateur cliquera sur le +/- (ou autre image suivant la plateforme) pour déplier/replier la branche. C'est dans cette méthode que le plus gros du travail va devoir être fait.

Le principe consiste à avoir deux tableaux javascript de données (Array) :

• Le premier tableau contiendra toutes les données de l'arbre (le tableau 'gDataList' dela vue d'arbre simple)
• le second tableau contiendra seulement les données qui sont effectivement affichées. Nous l'appellerons par exemple 'gDataView'.

L'objet 'theview' ne se basera alors plus sur 'gDataList' pour afficher les données, mais sur le contenu de 'gDataView'.

Il faut ajouter aux objets 'dataInfo' une propriété indiquant si la branche est ouverte ou fermée. Cette propriété va nous servir dans 'toggleOpenState(…)', pour savoir l'état courant de la branche, et donc la fermer si elle était ouverte, ou le contraire.

La méthode 'toggleOpenState(…)' se chargera alors de modifier 'gDataView' en fonction de cette information : on insèrera dans le tableau les éléments de la branche concernée s'il s'agit d'une ouverture de branche, ou de les enlever s'il s'agit d'une fermeture (on peut utiliser pour ça la méthode 'splice(…)' des tableaux javascript — array — pour enlever ou ajouter des éléments à des endroits précis du tableau).

Il ne faut pas non plus oublier de mettre à jour la propriété index de tous les objets pour que les autres méthodes fonctionnent correctement (en particulier 'getParentIndex(…)').

Exemple

à faire…