3

私のFirefox拡張機能には、2つの列を持つ単純なツリーがあります。私はプログラムでしようとしています：

  • 行を追加する
  • すべての行を削除します

私の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が未定義です

編集：

XUL要素を直接追加するというWladimirの提案の後、これにより行が追加されます。

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);

この例ではハードコーディングされていますが、セルの値（ラベル属性）はユーザー入力から取得されます。XSSを防ぐために、ユーザー入力をXUL要素の属性に直接入れる場合、どのエンコード/エスケープ方法を使用する必要がありますか？

4

1 に答える 1

0

Let me ask it this way: why should it work? The documentation tells us that tree.view is an nsITreeView instance. And nsITreeView has no property called data. Just because you can set this property nevertheless doesn't mean that it will do anything.

Now how would you actually put data into a tree widget? The documentation explains that there are several tree types, depending on type the data might come from a different place. You probably want to use the default option - a content tree. This means that you need to create treeitem elements for each row in your data and add these to the treechildren element - as shown in the example. You can generate these elements dynamically using the usual DOM methods.

The tree widget can also generate its content automatically from an RDF or XML datasource. If you have your data in a JavaScript object however, the only alternative would be creating a custom nsITreeView implementation and assigning it to tree.view. But this is not quite trivial and usually an overkill.

于 2012-05-24T09:15:09.560 に答える