javascript - 带有动态元素和点击功能的 Firefox 侧边栏中的树元素

Question

我创建了一个扩展来在 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 没有显示任何内容

1) 我怎样才能实现链接功能..就像在点击树单元元素时打开的链接一样？ “onclick”属性不起作用。另外，我可以在单击单个项目时运行 javascript 函数吗？

2) 如何显示动态列表。假设我有一个返回列表的 JS 函数，我如何在这里将它显示为树元素(基本上每次我伸展树(Splay Tree)父节点以查看子节点时 js 都应该运行)

Answer 1

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

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

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

<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 接口(interface)的对象(参见下面的链接)，并将其指定为您在 XUL 中创建的树的 View 。

此对象将作为 Tree 小部件到数据的接口(interface)，将允许树在数据更改时自动更新。

您可以在此处找到有关自定义 TreeView 的更多信息:https://developer.mozilla.org/en/XUL_Tutorial/Custom_Tree_Views