Javascript firefox侧栏中的树元素，带有动态元素和单击功能

我已经创建了一个扩展来显示firefox中的边栏。 现在我需要显示一个树状结构，其中第三层将是动态的，并在单击时加载特定链接。 我知道如何使用静态数据创建三级层次结构。。这是密码

  <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>

onclick没有显示任何内容

  <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>

1） 如何实现链接功能。。与单击treecell元素时打开的链接相同？“onclick”属性不起作用。我还可以在单击单个项目时运行javascript函数

  <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>

---

2） 如何显示动态列表。假设我有一个重新生成列表的JS函数，我如何在这里将其显示为树元素（基本上，每次我展开树父级以查看子级时JS都应该运行）

首先，将onclick事件处理程序放在树本身上，而不是放在元素上。当用户单击某个单元格时，由于事件冒泡，无论哪个单元格收到单击，树都将捕获该单元格：

  <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>

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

其次，要动态创建内容，请在XUL中创建一个空树：

  <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>

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

然后在JavaScript中，创建一个实现nsITreeView接口的对象（请参见下面的链接），并将其指定为在XUL中创建的树的视图

  <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>

此对象将用作树小部件的接口，以便在数据更改时允许树自动更新自身

  <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>

您可以在此处找到有关自定义树视图的更多信息：

  <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>