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）如何实现链接功能..如在单击treecell元素时打开的链接？ “onclick”属性不起作用。此外，我可以单击单个项目运行JavaScript函数。

2）如何显示动态列表？假设我有一个重新生成列表的JS函数，我怎么能在这里将它显示为树元素（基本上每当我展开树父看到孩子时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接口的对象（请参阅下面的链接），并将其指定为您在XUL中创建的树的视图。

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

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

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

1 个答案: