XUL チュートリアル - ツリーの選択

このセクションでは、ツリー内の選択項目の取得と設定について説明します。

選択されたツリー項目を取得する

ツリー内の個々の treeitem 要素が個別に選択される場合があるかもしれません。ツリーに multiple 属性を追加すると、ユーザーは同時に複数の項目が選択できます。選択は、必ずしも隣り合っている必要はありません。ツリーは、ある項目が選択されているのかどうかを判断するのに使える多数の関数を提供しています。

以下の例では、同じツリーの例を使用します。これは、サイズ上の理由から、別個に見る ことができます。ここには 3 つのトップレベルの項目があり、それぞれ違った数の子供項目をもちます。複数の選択も可能です。

最初に、ある項目が選択されているかどうかをどうやって判断するのか見ることにしましょう。onselect イベントハンドラーを tree 要素に追加します。ユーザーが項目を選択すると、このイベントハンドラーが呼び出されます。ハンドラーは、ユーザーが項目をクリックすると呼び出されます。ユーザーは、カーソルキーを使って選択を変更するかもしれません。項目間を素早くスクロールするために、ユーザーがカーソルキーを押し続けた場合、イベントハンドラーは、ユーザーがそれを止めるまで呼び出されません。この結果、パフォーマンスが改善されます。これはまた、選択イベントはこれらの項目に送られることはないにも関わらず、幾つかの項目が強調表示されるということです。

onselect イベントハンドラーのシンタックスを以下に示します。上でリンクしたツリーの例は、これからするツリーの選択を使った実験のため、変更して構いません。

<tree id="treeset" onselect="alert('You selected something!');">

ツリー要素には selectedItems プロパティーがあります。これは、ツリー内の選択された項目すべての配列です。選択された項目がどんなに深くネストされていても、ここには選択された項目すべてがあります。項目が選択されていない場合は、配列の長さは 0 となります。

ツリーの例を以下のように変更してください。クリックされると、現在選択されている要素のリストを表示するボタンを追加します。

<script src="treetest.js"/>

<button label="Show Selected" onclick="showSelected()"/>


<tree id="treeset" multiple="true" flex="1">

treetest.js:

function showSelected()
{
  var tree=document.getElementById('treeset');
  var items=tree.selectedItems;
  if (items.length==0) alert("No items are selected.");
  else {
    txt="You have selected:\n\n";
    for (t=0;t<items.length;t++){
      txt+=items[t].firstChild.firstChild.getAttribute('label')+'\n';
    }
    alert(txt);
  }
}

関数 showSelected は、まず、その id を使って見付けたツリーへの参照を取得します。変数 items には、 selectedItems プロパティーが割り当てられます。何も選択されていない場合は、それを知らせるアラートが表示されます。そうではない場合、個々の項目のテキストからなる文字列 txt が作られます。これを行なう行は、配列内の個々の項目の最初の子供の最初の子供を取得します。これは、treeitem から treecell への参照を取得するために必要です。次いで、表示されるテキストをもつ label 属性を取得します。最後に、ループの外側で、作られたテキストを内容とするアラートを表示します。

選択の配列は、トップレベルの項目とツリーのもっと下にある項目を区別しないことを思い出して下さい。これを区別するには、項目自身を調べるか、項目の container 属性を見ればよいでしょう。

項目を選択する

選択された項目を検索する以外に、選択された項目を更新することもできます。ツリーオブジェクトには、このために使える様々な関数があります。

以下で説明する関数の中には、インデックスを必要とするものやインデックスを返すものもあります。これは、ツリー内の項目の位置です。ツリー内の項目は、0 から始まる番号がふられています。表示される項目だけがカウントに含められます。このため、子供項目をもつ項目が折り畳まれて子供項目が隠されている場合、子供ノードは、カウントの中には含まれません。項目が展開されている場合、子供ノードは、カウントの中に含まれます。

子供項目は親の直後にカウントされます。これは、トップレベルの項目が 3 つあり、そのそれぞれに子供項目が 2 つある場合、全部で 9 項目あるということです。最初の項目 (インデックスが 0) が最初のトップレベルの項目です。次のインデックス 1 の項目は、最初の子供になります。2 番目の子供は、インデックス 2 で、2 番目の親項目が 3 番目の位置に来るといったようになります。

右にあるイメージでは、8 行が表示されており、そのうち 2 行が選択されています。最初の選択された行はインデックスが 4 になり、2 番目の選択された行はインデックスが 7 になります。表示されていない行は、インデックスのカウントに含まれていません。

関数 getItemAtIndex を、特定のインデックスの treeitem への参照を取得するのに使うことができます。この関数は、パラメータを一つ取ります。検索したい項目のインデックスです。id によって項目を探すことによって、treeitem の参照を検索することもできます。treeitem を取得すると、それが選択されているかどうかに関わらず、それを更新できます。

選択関数によって、multiple が使われているかどうかに関わらず、複数の項目を選択することができます。この属性は、ユーザーが複数の項目を同時に選択できるかどうかをコントロールするにすぎません。

以下のテーブルは、使用可能な選択関数をリストしています。これらはすべて、ツリー項目のメソッドではなく、ツリーオブジェクトのメソッドです。

以下の例は、ツリーから項目を選択する方法を示しています。ここでは、テキストボックスとボタンを 2 つ追加しています。インデックスをフィールドに入力し、Select ボタンを押します。そのインデックスの項目が選択されます。Unselect ボタンを押すと、選択が解除されます。項目を展開したり折り畳んだりすることによって、この実験ができるでしょう。

<box>
  <label control="tbox" value="Select item at index:"/>
  <textbox id="tbox"/>
  <button label="Select" onclick="doSelect()"/>
  <button label="Unselect" onclick="doUnselect()"/>
</box>

<tree id="treeset" multiple="true" flex="1">

treetest.js:

function doSelect()
{
  var tree=document.getElementById('treeset');
  var tbox=document.getElementById('tbox');
  var idx=parseInt(tbox.value);
  tree.addItemToSelection(tree.getItemAtIndex(idx));
}
  
function doUnselect()
{
  var tree=document.getElementById('treeset');
  var tbox=document.getElementById('tbox');
  var idx=parseInt(tbox.value);
  tree.removeItemFromSelection(tree.getItemAtIndex(idx));
}

その他のツリー関数

これ以外にも、ツリーで使える関数は数多くあります。それらを下に、簡単なリファレンスとしてリストしました。不正な項目やインデックスの場合は、何も起こりません。

(進む) 次は、オブザーバーの使い方を見ることにしましょう。