tree

表のような要素、あるいは階層的な要素の行を保持するために使用するコンテナ。tree は行と列をいくつでも含みます。tree の各行は、親から字下げして表示される子の行を含みます。他の要素と異なり、tree 内に表示されるデータはタグを使って指定されるのではなく、View オブジェクトから決定されます。View オブジェクトは nsITreeView インタフェースを実装しています。tree にデータを表示するために、View を検索します。tree の使用方法は、下の一覧のようにいくつかあります。2 列目はその tree の view プロパティ経由で利用可能なインタフェースの一覧です。3 列目は treeitem 要素が使われるかどうかを示します。

tree を水平にスクロールできるようにしたいときは、width 属性を各列に設定し、tree の幅を含まれるオブジェクトより広くします。

詳しい情報が XUL チュートリアルにあります。または Tree Widget Changes を参照してください。

属性

disableKeyNavigation, disabled, editable, enableColumnDrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex, treelines

プロパティ

accessibleType, builderView, columns, contentView, currentIndex, disableKeyNavigation, disabled, editingColumn, editingRow, enableColumnDrag, firstOrdinalColumn, inputField, selType, selstyle, tabIndex, treeBoxObject, view

例

いくつかの列を持つツリー

<tree flex="1" rows="2">

  <treecols>
    <treecol id="sender" label="Sender" flex="1"/>
    <treecol id="subject" label="Subject" flex="2"/>
  </treecols>

  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="[email protected]"/>
        <treecell label="Top secret plans"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="[email protected]"/>
        <treecell label="Let's do lunch"/>
      </treerow>
    </treeitem>
  </treechildren>

</tree>

いくつかの入れ子状のアイテムを持つツリー

<tree id="myTree" flex="1" hidecolumnpicker="false" seltype="single" class="tree"
      rows="5">
  <treecols id="myTree2-treeCols">
    <treecol id="myTree2-treeCol0" primary="true" flex="2" label="Column A"
             persist="width" ordinal="1"/>
    <splitter class="tree-splitter" ordinal="2"/>
    <treecol id="myTree2-treeCol1" flex="1" label="Column B"
             persist="width" ordinal="3"/>
  </treecols>
  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="1"/>
        <treecell label="a"/>
      </treerow>
    </treeitem>
    <!-- Make sure to set container="true" -->
    <treeitem container="true" open="true">
      <treerow>
        <treecell label="2"/>
        <treecell label="b"/>
      </treerow>
      <treechildren>
        <treeitem>
          <treerow>
            <treecell label="2a"/>
            <treecell label="ba"/>
          </treerow>
        </treeitem>
      </treechildren>
    </treeitem>
  </treechildren>
</tree>

属性

プロパティ

メソッド

startEditing( row, column )

戻り値の型: 戻り値なし

指定セルのユーザによる編集可能状態を有効にします。これは row index およびセルの位置の nsITreeColumn によって指定します。セルの内容を取得するためにツリービューの nsITreeView.getCellText() メソッドが呼び出されます。

stopEditing( shouldaccept )

戻り値の型: 戻り値無し

編集中のセルの編集を中止します。shouldAccept 引数が true の場合、セルのラベルは編集した値に変更されます (セルの内容を変更するためにツリービューの nsITreeView.setCellText() メソッドが呼び出されます)。この引数が false 場合、セルのラベルは編集前の値に戻されます。

関連項目

要素

treecols, treecol, treechildren, treeitem, treerow, treecell, treeseparator

インタフェース

nsIAccessibleProvider, nsIDOMXULTreeElement, nsIDOMXULMultiSelectControlElement

スクリプトの例

スタイルシートで各列へ交互に色を付けるには、次のようなスタイル規則を使用してください:

treechildren::-moz-tree-row(selected) { background-color: #FFFFAA; }
treechildren::-moz-tree-row(odd) { background-color: #EEEEEE; }
treechildren::-moz-tree-row(odd, selected) { background-color: #FFFFAA; }
treechildren::-moz-tree-cell-text(selected) { color: #000000; }
treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; }

コンテンツツリー上で選択された各行の id 属性の値を取得するには、次のようにします:

var idList = [];
var rangeCount = tree.view.selection.getRangeCount();
for (var i = 0; i < rangeCount; i++) {
  var start = {};
  var end = {};
  tree.view.selection.getRangeAt(i, start, end);
  for (var c = start.value; c <= end.value; c++) {
    idList.push(tree.view.getItemAtIndex(c).firstChild.id);
  }
}

次の例は、チェックボックス型の列にチェックが入った値の行の index 値の配列を返します:

function getCellChecked(tree, columnid) {
  var arr = [];
  var column = tree.columns.getNamedColumn(columnid);
  for (var i = 0; i < tree.view.rowCount; i++) {
    if (tree.view.getCellValue(i, column) == 'true')
      arr.push(i);
  }
  return arr;
}

tree で現在選択されている行から、特定の列 ('age' と名付けられた列) のテキストの値を取得するには:

var t = document.getElementById('mytree');
document.title = t.view.getCellText(t.currentIndex,t.columns.getNamedColumn('age'));

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="file://C:/main.css" type="text/css"?>                                    
<window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<row><button label="GetRowValues" oncommand="getrowcellvalues();"/></row>
 <tree flex="1" editable="true" id="mytree">

  <treecols>
    <treecol label="Active" type="checkbox" editable="true" />
    <treecol label="Name" flex="1" id="name"/>
  </treecols>

  <treechildren>
    <treeitem>
      <treerow>
        <treecell value="false"/>
        <treecell label="Alice"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell value="false"/>
        <treecell label="Bob"/>
      </treerow>
    </treeitem>
  </treechildren>

</tree>

</window>

treechildren::-moz-tree-checkbox {
  /* 選択されていないチェックボックスのtreecell。
     *必ず* treechildren::-moz-tree-checkbox(checked)より前に指定すること。そうしないと効果がなくなる。 */
  list-style-image: url("")
}
treechildren::-moz-tree-checkbox(checked) {
  /* 選択されたチェックボックスのtreecell。
     cbox-check.gifは、Mac OS XのFirefox 1～3では使えない。自身の拡張機能などの画像のURLを指定すべき。 */
  list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif");
}
treechildren::-moz-tree-checkbox(disabled) {
  /* 無効なチェックボックスのtreecell。
     cbox-check-dis.gifも、Mac OS XのFirefox 1～3では使えない。 */
  list-style-image: url("chrome://global/skin/checkbox/cbox-check-dis.gif")
}

treechildren::-moz-tree-row(selected)            { background-color: #FFFFAA; }
treechildren::-moz-tree-row(odd)                 { background-color: #EEEEEE; }
treechildren::-moz-tree-row(odd, selected)       { background-color: #FFFFAA; }
treechildren::-moz-tree-cell-text(selected)      { color: #000000; }
treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; }
treechildren::-moz-tree-row(hover) {background-color: #FFFFAA !important;}

treechildren:-moz-tree-column {
  border-right:1px solid rgb(220,220,220) !important;
}

function getrowcellvalues() {
  var tree = document.getElementById('mytree');
  for (var i = 0; i < tree.view.rowCount; i++) {
    if (tree.view.getCellValue(i, tree.columns.getColumnAt(0)) == 'true'){
      alert(tree.view.getCellText(i, tree.columns.getNamedColumn("name")));
    }
  }
}