如何添加和刪除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樹

回答

相關問題