Firefox 3 以降限定だが、ツリーのインライン編集が可能となる。この機能を使い、ツリーのアイテムをダブルクリックして果物の名前を変更する機能を追加する。ベースとなるソースコードはその1～表示を参照。

fruits.xul

tree 要素へ editable=”true” 属性を追加する。

    <tree id="fruitsTree" editable="true" flex="1">

fruits.js

nsITreeView#isEditable メソッドを実装する。引数 row で指定された行がセパレータでなければ編集を可能にする。

    isEditable: function(row, col) {
        return !this.isSeparator(row);
    },

ダブルクリックでセルを編集して Enter キー押下で確定させると、 nsITreeView#setCellText メソッドが呼び出される。
setCellText メソッドでは、引数 row で指定されたアイテムのデータそのものを変更してから nsITreeBoxObject#invalidate でツリーを再描画する。

    setCellText: function(row, col, value) {
        this._data[row] = value;
        this._treeBoxObject.invalidate();
    },

関連記事

• カスタムツリービューの基本的な使い方（その1～表示）
• カスタムツリービューの基本的な使い方（その2～追加・削除）
• カスタムツリービューの基本的な使い方（その3～インライン編集）
• カスタムツリービューの基本的な使い方（その4～並び替え）
• カスタムツリービューの基本的な使い方（その5～ドラッグ＆ドロップ）
• カスタムツリービューの基本的な使い方（その6～複数列ツリー）
• カスタムツリービューの基本的な使い方（その7～プログレスバー）
• カスタムツリービューの基本的な使い方（その8～チェックボックス）
• カスタムツリービューの基本的な使い方（その9～階層構造 – 表示）
• カスタムツリービューの基本的な使い方（その10～階層構造 – フォルダ開閉）