« »

カスタムツリービューの基本的な使い方（その8～チェックボックス）

Permanent Link 2007-10-23 14:27 | category XUL Widgets | tags | comment Comment (0)

ツリーセルに文字列の代わりにチェックボックス（厳密にはチェックマーク？）を表示させることも可能である。
ベースとなるソースコードはその1～表示を参照。

fruits.xul

まず、チェックボックスの画像を表示させるためのスタイルシート fruits.css を読み込む処理命令を追加する。treecol 要素へ type=”progressmeter” 属性を付加すると、その列はプログレスバーが表示可能になる。
また、チェックボックスを直接クリックして切り替え可能にするため、 tree 要素と treecol 要素の両方へ editable=”true” 属性を追加する。 

<?xml-stylesheet href="fruits.css" type="text/css"?>

    <tree id="fruitsTree" flex="1" editable="true">
        <treecols>
            <treecol label="Name" flex="1" primary="true" />
            <treecol label="Juicy" type="checkbox" editable="true" />
        </treecols>
    </tree>

fruits.css

furits.xul から読み込まれるスタイルシート fruits.css を作成する。以下のようにするとチェックマークが表示される。もちろん自前の画像を使用したり、チェックされていない状態でも画像を表示させたりすることも可能である。 

treechildren::-moz-tree-checkbox(checked) {
    list-style-image: url(chrome://global/skin/checkbox/cbox-check.gif);
}

fruits.js

配列データの内容を二次元配列化する。各アイテムの0番目の要素は「Name」列で表示させる文字列、1番目の要素は「Juicy」列のチェックボックスのオン／オフ状態である。 

var gFruitsData = [
    ["Grape"     , true ],
    ["Apple"     , false],
    ["Orange"    , true ],
    ["Banana"    , false],
    [null        , false],    // separator
    ["Pear"      , false],
    ["Peach"     , true ],
    ["Strawberry", false],
    ["Cherry"    , false],
    ["Melon"     , true ],
    [null        , false],    // separator
    ["Watermelon", true ],
    ["Plum"      , false],
    ["Papaya"    , false],
    ["Lemon"     , true ],
];

これに伴い、 nsITreeView#isSeparator, getCellText を以下のように修正する。

    isSeparator: function(index) {
        return this._data[index][0] == null;
    },

    getCellText: function(row, col) {
        switch (col.index) {
            case 0: return this._data[row][0];
        }
    },

各セルのチェックボックスの現在のオン／オフ状態は nsITreeView#getCellValue で決定される。

    getCellValue: function(row, col) {
        return this._data[row][1];
    },

各セルのチェックボックスがクリックでオン／オフ切り替えが可能かどうかは、 nsITreeView#isEditable メソッドで決定される。今回の場合は、列番号が1でなおかつセパレータ行でなければ切り替え可能である。 

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

チェックボックスをクリックしてオン／オフ切り替えしようとすると、 nsITreeView#setCellValue メソッドが呼び出される。このメソッドではクリックしたセルに対応するアイテムの値を変更し、なおかつ nsITreeBoxObject#invalidateCell でチェック状態が変化したセルだけを再描画する。 

    setCellValue: function(row, col, value) {
        this._data[row][col.index] = value;
        this._treeBoxObject.invalidateCell(row, col);
    },

関連記事

TOP

  

TOP