Question

在我的Firefox扩展程序中，我有一个简单的树，它有两列。我正在尝试以编程方式：

添加一行
删除所有行

我的XUL树：

<tree flex="1" id="mytree" hidecolumnpicker="true">

  <treecols>
    <treecol id="sender" label="Sender" flex="1"/>
    <treecol id="subject" label="Subject" flex="2"/>
  </treecols>

  <treechildren>

  </treechildren>

</tree>

Javascript我试图添加行：

// trying to add rows
var data = {
    {'sender' : 'John', 'subject' : 'something'},
    {'sender' : 'Adam', 'subject' : 'something else'},
    {'sender' : 'Bob', 'subject' : 'something else again'}
};

document.getElementById("mytree").view.data = data;

这没有错误，树只是没有添加行。我知道代码会运行，因为如果我添加一个alert()就会触发。

Javascript我试图删除所有行：

var tree = document.getElementById("mytree");

tree.view.data = {};
tree.view.treeBox.rowCountChanged(0, -1);

这会产生错误：

document.getElementById（“mytree”）。view.treeBox未定义

修改

在Wladimir建议直接添加XUL元素之后，这将添加一行：

var treeChildren = document.getElementById("my_tree_children");

var treeitem = document.createElement('treeitem');
var treerow = document.createElement('treerow');

var treecell_1 = document.createElement('treecell');
var treecell_2 = document.createElement('treecell');

treecell_1.setAttribute('label', 'John');
treecell_2.setAttribute('label', 'something');

treerow.appendChild(treecell_1);
treerow.appendChild(treecell_2);

treeitem.appendChild(treerow);

treeChildren.appendChild(treeitem);

尽管在此示例中进行了硬编码，但单元格的值（标签属性）将来自用户输入。在将用户输入直接放入XUL元素的属性时，我应该使用什么编码/转义方法，以防止XSS？

Answer 1

让我这样问：为什么它的工作原理？文档告诉我们tree.view是nsITreeView个实例。 nsITreeView没有名为data的属性。仅仅因为你可以设置这个属性并不意味着它会做任何事情。

现在，您如何将数据放入tree窗口小部件？ documentation解释了有几种树类型，具体取决于数据类型可能来自不同的地方。您可能希望使用默认选项 - 内容树。这意味着您需要为数据中的每一行创建treeitem元素，并将这些元素添加到treechildren元素中 - 如example所示。您可以使用常用的DOM方法动态生成这些元素。

tree窗口小部件还可以从RDF或XML数据源自动生成其内容。但是，如果您在JavaScript对象中包含数据，则唯一的选择是创建自定义nsITreeView实施并将其分配给tree.view。但这并不是一件轻而易举的事情，通常也是一种矫枉过正的行为。

如何在Firefox Addon XUL树中添加和删除行

1 个答案: