Xbl_editabletree

Voici le binding d'un élément ajoutant aux avantages du tree (affichage, redimensionnement, déplacement des colonnes, tris des valeurs) plusieurs modes d'édition de ces valeurs.

Démo en ligne et téléchargement : editableTree

J'ai repris une idée déjà utilisée pour une édition par champ texte : placer le tree dans un stack et ajouter par dessus un textbox au bon endroit.

L'édition par champ texte ne suffisait pas à mes besoins et j'ai donc développé de nouveaux modes d'édition :

• champ texte : on peut valider la nouvelle valeur par rapport à une expression régulière.
• case à cocher : une ligne peut être cochée ou non. On peut modifier toutes les case de la colonnes en appuyant sur la touche 'shift'.
• bouton radio : une seule ligne peut être sélectionnée à la fois dans la colonne.
• liste simple : on choisit une valeur dans une liste avec les données créées à la main.
• liste rdf : on définit les valeurs de la liste par une source rdf.

On peut choisir la cellule à éditer à la souris (par simple clic) ou au clavier (touches de direction). On peut éditer la cellule sélectionnée avec la souris (double clic) ou au clavier (touche 'entrée').

La modification est immédiate pour les cas bouton radio et case à cocher. Pour les autres cas, un nouvel élément est ajouté au dessus de la cellule. On peut valider la nouvelle valeur avec la touche 'entrée' ou annuler l'édition avec la touche 'echap'.

Dans le cas d'un tree alimenté par du rdf, le tri des valeurs est possible en double-cliquant sur l'entête de la colonne.

Le fichier xbl contient un exemple complet de code, indiquant les attributs nécessaires à la configuration (CSS et javascript) et à l'utilisation de ce tree.

Toutes ces fonctionnalités sont également disponibles en mode remote.

Ce binding n'est plus mis à jour.

Démo de script sur les arbres (édition cellule, drag&drop) par ici : demo xul