XUL:tree

出典: MDC

« XUL リファレンス HOME    [ 例 | 属性 | プロパティ | メソッド | 関連項目 ]

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

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

詳しい情報が XUL チュートリアルにあります。または Tree Widget Changes。

属性

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

プロパティ

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

[編集] 例

<tree flex="1">

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

  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="joe@somewhere.com"/>
        <treecell label="Top secret plans"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="mel@whereever.com"/>
        <treecell label="Let's do lunch"/>
      </treerow>
    </treeitem>
  </treechildren>

</tree>

入れ子状のアイテムを持つ tree:

<tree id="myTree" flex="1" hidecolumnpicker="false" seltype="single" class="tree">
  <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>

[編集] 属性

disabled

型: 真偽値

要素が無効化されているかどうかを示します。ある要素が true に設定されていたら、その要素は無効化されています。無効化された要素は通常グレイ表示のテキストで描画されます。要素が無効化されていると、ユーザのアクションには応答せず、フォーカスもあてられず、command イベントも発生しません。

disableKeyNavigation

型: boolean

この属性が使用されていない場合、ユーザは、項目のラベル内の文字に一致するキーを押下することによって、要素内の特定の項目に移動することができます。これはインクリメンタルに行われるため、さらに文字を入力して、項目をさらに特定することができます。この機能は、この属性を true に設定することによって無効化されます。

editable

型: boolean

tree のセルが編集可能であることを示す。

enableColumnDrag

型: boolean

true に設定した場合、ユーザはコラムヘッダをドラッグして表示順を変更できます。

flags

型: スペースで区切られた下記の値のリスト

flag の設定は様々な目的で使用されます。この属性の値には二つの flag が定義されています。

• dont-test-empty: テンプレートが生成したコンテンツに対して、ビルダーはコンテナが空かどうかをチェックしません。
• dont-build-content: この flag は、要素が生成すべきではないコンテンツを示すために tree 上で使用されます。この結果、パフォーマンスは向上しますが、tree の row を取得するために DOM 関数を使用することができなくなります。

hidecolumnpicker

型: boolean

false に設定した場合、tree の右上隅に、表示する列を選択するドロップダウンメニューが表示されます。true に設定した場合、このコラムピッカは隠されます。デフォルト値は false です。

onselect

型: script code

このイベントは行が選択された時、または選択が変更された時、tree に送られます。ユーザは、Shift または Ctrl を押下しながら行をクリックすることにより、複数の行を選択することができます。onselect イベントは選択が追加、または解除された各項目に送られます。

rows

型: integer

要素内に表示する行数。要素がこの数値よりも多くの行を含むときはスクロールバーが現れます。要素内の実際の rows の値を取得するには getRowCount メソッドを使用してください。

seltype

型: 下記の値のいずれか一つ

複数の選択を許可するかどうかを指示します。

• single: 一度に一行のみが選択できます。(listbox のデフォルト値)
• multiple: 一度に複数行が選択できます。(tree のデフォルト値)
• cell: 個々のセルが選択できます。 Firefox 3 の新機能
• text: 行が選択されたとき、最初の列のテキストのみが強調表示されます。

statedatasource

型: datasource URI

Chrome XUL は、tree state 情報の格納に使用する RDF データソースを指定します。これは、tree 項目を展開した状態や折り畳んだ状態を維持するために使用されます。この情報は、次に XUL ファイルが開かれたときのために記憶されます。この属性を指定しない場合、state 情報は local store(rdf:local-store) に格納されます。

tabindex

型: 整数

要素のタブの順番。タブの順番は tab キーが押下されたときにフォーカスが移動する順番です。より大きな tabindex の値をもつ要素は、タブの遷移が後になります。

[編集] プロパティ

accessibleType

型: integer

要素の accessibility オブジェクトの種類を示す値。

builderView

型: nsIXULTreeBuilder

tree データを構築する tree builder への参照。builder は、tree 内の各行のための RDF リソースへのアクセスを提供し、列のデータを並べ替えられるようにします。Mozilla の最近のバージョンでは、builderView プロパティは view プロパティの別名です。これら二つのインタフェースは JavaScript で一つのインタフェースに合わさっています。このプロパティは読み取り専用です。

columns

型: nsITreeColumns

tree の列を nsITreeColumns オブジェクトとして返します。

contentView

型: nsITreeContentView

コンテンツビルダーで構築された (flags="dont-build-content" 設定を持たない) tree では、contentView は nsITreeContentView への参照になります。このインタフェースは、与えられた行の index に対応する DOM 要素の取得や設定を行います。コンテンツビルダーで構築されたものでない tree では、取得する DOM ノードが存在しないため、nsITreeContentView の関数を利用することはできません。Mozilla の最近のバージョンでは、nsITreeContentView プロパティは view プロパティの別名です。これら二つのインタフェースは JavaScript で一つのインタフェースに合わさっています。このプロパティは読み取り専用です。

currentIndex

型: integer

現在フォーカスされた tree 内の行の index を設定します。行がフォーカスされていない場合、値は -1 になります。複数選択できる tree では、現在の index は選択された最後の行になります。このプロパティを選択の変更に使用してはいけません。代わりに、tree.view.selection を通して利用可能な nsITreeSelection オブジェクトのメソッドを使用してください。

disabled

型: 真偽値

disabled 属性の値の取得と設定。

disableKeyNavigation

型: boolean

disableKeyNavigation 属性の値の取得と設定。

editingColumn Firefox 3 の新機能

型: integer

現在編集中の tree セルの行 index。セルが編集中でないときは -1 になります。

editingRow Firefox 3 の新機能

型: nsITreeColumn

現在編集中の tree セルの列 index。セルが編集中でないときは null になります。

enableColumnDrag

型: boolean

true に設定した場合、ユーザはコラムヘッダをドラッグして表示順を変更できます。

firstOrdinalColumn

型: treecol 要素

最初の treecol 要素への参照。tree 内に表示された最初の列とは限りません。

inputField

型: textbox 要素

編集に使用される textbox を保持。このプロパティは読み取り専用です。

selType

型: 文字列

seltype 属性の取得と設定を行います。

selstyle

型: string

値に primary を設定すると、tree 内の項目が選択された時、最初の列のラベルのみが強調表示されます。その他の場合はすべての行が強調表示されます。違いを知るには、Mozilla メールのフォルダリストとメッセージリストの選択スタイルを比較してください。

tabIndex

型: 整数

tabindex 属性の値の取得と設定。

treeBoxObject

型: nsITreeBoxObject

box オブジェクトが window 上の tree を描画します。このオブジェクトは nsITreeBoxObject インタフェースを実装し、特定の座標のセルを取得する関数を含み、セルの再描画および tree のスクロールを行います。このプロパティは boxObject プロパティと同等です。

view

型: nsITreeView

tree の表示領域 (view) 。これは、表示されるデータを生成するオブジェクトです。 nsITreeView を実装するオブジェクトをこのプロパティに割り当ててください。RDF から構築されたツリーや treeitem を直接使用するツリーはすでに表示領域を持っています。表示領域内のセルに含まれるデータを取得できる関数が利用可能です。この関数は他のものに入れ子になった行を決定します。view 関数の完全なリストは nsITreeView インタフェースをご覧ください。

[編集] メソッド

startEditing( row, column ) Firefox 3 の新機能

戻り値の型: 戻り値なし

与えられたセルのユーザによる編集を活性化します。これは row index およびセルの位置の nsITreeColumn によって指定します。セルの内容を取得するためにツリービューの getCellText() メソッドが呼び出されます。

stopEditing( shouldaccept ) Firefox 3 の新機能

戻り値の型: 戻り値なし

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

[編集] 関連項目

要素

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

インタフェース

nsIAccessibleProvider, nsIDOMXULTreeElement, nsIDOMXULMultiSelectControlElement

[編集] スクリプトの例

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

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 属性の値を取得するには、次のようにします: tcooper_mont at yahoo dot com

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