在我的 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?
最佳答案
让我这样问:为什么应该它有效?文档告诉我们 tree.view
是一个 nsITreeView
实例。并且 nsITreeView
没有名为 data
的属性。仅仅因为您可以设置此属性并不意味着它会做任何事情。
现在您实际上如何将数据放入树
小部件中? documentation解释说有几种树类型,根据类型数据可能来自不同的地方。您可能想使用默认选项 - 内容树。这意味着您需要为数据中的每一行创建 treeitem
元素,并将它们添加到 treechildren
元素中 - 如 example 中所示.您可以使用常用的 DOM 方法动态生成这些元素。
tree
小部件还可以从 RDF 或 XML 数据源自动生成其内容。但是,如果您的数据位于 JavaScript 对象中,唯一的替代方法是创建自定义 nsITreeView
实现并将其分配给 tree.view
。但这并不是微不足道的,而且通常是矫枉过正。
关于javascript - 如何从 Firefox Addon XUL 树中添加和删除行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10733638/