如何添加和删除Firefox插件中的行XUL树

在我的Firefox扩展中，我有一个简单的树，它有两列。我试图以编程方式：如何添加和删除Firefox插件中的行XUL树

添加一行
删除所有行

我的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

编辑：

弗拉基米尔的建议，直接添加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？

来源

2012-05-24 ServerBloke

不，你应该使用['textContent']（https://developer.mozilla.org/en/DOM/Node.textContent）而不是'innerHTML'。但这不是问题 - 要显示在“treecell”中的文本应该放入'label'属性中，参见['setAttribute']（https://developer.mozilla.org/en/DOM/element.setAttribute ）。 –

@WladimirPalant你是对的。它使用'setAttribute（）'。最后一个问题 - 在XUL属性上防止XSS的最佳做法是什么，因为内容将来自用户输入 - 请参阅我的编辑。 – ServerBloke

不要使用'innerHTML' :)其他DOM方法不会让你创建标签，当你不打算。 –

让我这样问：为什么应该它的工作？该文档告诉我们tree.view是一个nsITreeView实例。而nsITreeView没有财产，称为data。只是因为你可以设置这个属性并不意味着它会做任何事情。

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

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

来源

2012-05-24 09:15:09

我试过了你的建议 - 看到我在编辑中的问题，即使这样我仍然不能添加行。 – ServerBloke

我想你已经正确添加了这一行，它根本没有任何文本。 –

如何添加和删除Firefox插件中的行XUL树

回答

相关问题