élément de l'arborescence de la barre latérale de Firefox avec éléments dynamiques et fonctionnalité de clic

Question

J'ai créé une extension pour afficher une barre latérale dans firefox. Maintenant, j'ai besoin d'afficher une structure arborescente où le troisième niveau sera dynamique et chargera un lien particulier en cliquant. Je sais comment créer la hiérarchie à trois niveaux mais avec des données statiques .. Heres le code

<treechildren> 
    <treeitem container="true" open="true"> 
     <treerow> 
     <treecell label="Guys"/> 
    </treerow> 

    <treechildren> 
     <treeitem> 
     <treerow> 
      <treecell id="cell-of-treeitem1" label="Bob" onclick="alert('bob')"/> 
     </treerow> 
     </treeitem> 
     <treeitem> 
     <treerow> 
      <treecell label="Jerry"/> 

     </treerow> 
     </treeitem> 
    </treechildren> 
    </treeitem> 
</treechildren> 

Le onclick ne showup rien

1) Comment puis-je mettre en œuvre la fonctionnalité de lien .. comme dans un lien à ouvrir en cliquant sur un élément treecell? L'attribut "onclick" ne fonctionne pas. Aussi et puis-je lancer des fonctions JavaScript en cliquant sur les éléments individuels.

2) Comment puis-je avoir une liste dynamique affichée. Supposons que j'ai une fonction JS qui génère une liste, comment puis-je l'afficher ici en tant qu'éléments arborescents (en principe, le js devrait s'exécuter chaque fois que j'élargirai le parent pour voir les enfants)

Answer 1

D'abord, placez le gestionnaire d'événement onclick sur l'arbre lui-même, pas sur les éléments. Lorsque l'utilisateur clique sur une cellule, en raison de l'événement bouillonnant, l'arbre attraper, quelle que soit la cellule reçoit le clic:

function clickedOnSomething(event) { 
    if(event.originalTarget.localName == "treechildren") { 
     //do something here based on who is event.originalTarget 
    } 
} 

En second lieu, pour créer le contenu dynamique, vous créez un arbre vide en XUL :

<tree id="myTree" onclick="clickedOnSomething(event)" flex="1" seltype="single"> 
    <treecols> 
     <treecol id="myCol" label="Stuff" primary="true" flex="1" /> 
    </treecols> 
    <treechildren/> 
</tree> 

Puis en JavaScript, vous créez un objet qui implémente l'interface nsITreeView (voir le lien ci-dessous), et l'affecter comme la vue de l'arbre que vous avez créé dans XUL.

Cet objet servira d'interface pour le widget Arborescence aux données, ce qui permettra à l'arborescence de se mettre à jour automatiquement si les données changent.

Vous trouverez plus d'informations sur les vues arborescentes personnalisées ici: https://developer.mozilla.org/en/XUL_Tutorial/Custom_Tree_Views