javascript - 如何从 Firefox Addon XUL 树中添加和删除行

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

编辑:

根据 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 的属性。仅仅因为您可以设置此属性并不意味着它会做任何事情。

现在您实际上如何将数据放入树 小部件中？ documentation解释说有几种树类型，根据类型数据可能来自不同的地方。您可能想使用默认选项 - 内容树。这意味着您需要为数据中的每一行创建 treeitem 元素，并将它们添加到 treechildren 元素中 - 如 example 中所示.您可以使用常用的 DOM 方法动态生成这些元素。

tree 小部件还可以从 RDF 或 XML 数据源自动生成其内容。但是，如果您的数据位于 JavaScript 对象中，唯一的替代方法是创建自定义 nsITreeView 实现并将其分配给 tree.view。但这并不是微不足道的，而且通常是矫枉过正。