JavaScript/Wijmo/Wijmo入門

［Wijmo入門］TreeViewの使い方 – 基本機能編 –

by MESCIUS-dev

「Wijmo（ウィジモ）」は業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリです。

Wijmoには業務アプリケーションの表現と操作性を拡張する「TreeView（ツリービュー）」コントロールが含まれています。この記事では、その基本的な使い方を紹介します。

開発環境の準備とWijmoの参照

この記事では以下の開発環境を使用します。

作成するファイルは次の3つです。

index.htmlページ本体。このページの要素としてTreeViewを配置します
app.jsTreeViewを作成するコードを記載します
data.jsTreeViewに連結するデータを記載します
styles.css各種ページ要素のスタイル定義を記載します

入力コントロールの機能を使うために必要となるWijmoのモジュールなどへの参照設定は「index.html」で行います。また、ここにTreeViewの各種設定を記載する「app.js」とデータを記載する「data.js」の参照も追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TreeViewコントロール入門</title>
    <link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.nav.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/data.js"></script>
</head>
<body>
    <div class="container">
        <div class="options">
            <label><input type="checkbox" id="checkbox">チェックボックス</label><br />
            <label><input type="checkbox" id="drag">ドラッグを許可</label><br />
            <label><input type="checkbox" id="edit">編集を許可</label><br />
            <label><input type="checkbox" id="image">画像を表示</label><br />
            <label><input type="checkbox" id="disable">選択ノードの無効化</label><br />
            <br />
            <button id="collapse">すべて折りたたむ</button>
            <button id="expand">すべて展開</button>
        </div>
        <div id="Wijmo_TreeView"></div>
    </div>
</body>
</html>

ページ上の要素のスタイルを「styles.css」で定義します。

#Wijmo_TreeView{
    border: 1px solid gray;
    width: 300px;
}
.container{
    display: flex
}
.options{
    margin-left: 20px;
    width: 250px;
}

TreeViewコントロールを利用するために以下のドキュメントをご用意しています。ここで紹介する機能はこのコントロールのほんの一部に過ぎません。その他の多くの機能については、これらのドキュメントを参照していただければと思います。

TreeViewコントロールを作成する

それでは「app.js」に次のようなコードを記述してTreeViewコントロールを作成しましょう。

document.addEventListener("DOMContentLoaded", function () {
    // TreeViewの作成
    const treeView = new wijmo.nav.TreeView('#Wijmo_TreeView', {
        itemsSource: getData1(),
        displayMemberPath: 'header',
        childItemsPath: 'items',
        imageMemberPath: 'img',
        autoCollapse: false
    });

    // チェックボックス
    document.querySelector('#checkbox').addEventListener('click', e => {
        treeView['showCheckboxes'] = e.target.checked;
    });

    // ドラッグを許可
    document.querySelector('#drag').addEventListener('click', e => {
        treeView['allowDragging'] = e.target.checked;
    });

    // 編集を許可
    document.querySelector('#edit').addEventListener('click', e => {
        treeView['isReadOnly'] = !e.target.checked;
    });

    // 画像を表示
    document.querySelector('#image').addEventListener('click', e => {
        if(e.target.checked == true){
            treeView['itemsSource'] = getData2();
        }else{
            treeView['itemsSource'] = getData1();
        }
    });

    // 選択ノードの無効化
    document.querySelector('#disable').addEventListener('click', e => {
        if(e.target.checked == true){
            const node = treeView.selectedNode;
            if (node) {
                node.isDisabled = true;
            }
        }else{
            for (let node = treeView.getFirstNode(); node; node = node.next()) {
                node.isDisabled = false;
            }
        }
    });

    // すべて折りたたむ
    document.getElementById('collapse').addEventListener('click', function () {
        treeView.collapseToLevel(0);
    });

    // すべて展開
    document.getElementById('expand').addEventListener('click', function () {
        treeView.collapseToLevel(100000);
    });
});

それぞれの機能については、次の項目で詳しく見ていくので、ここではTreeViewコントロールのコンストラクタで設定しているプロパティについて説明します。

itemsSource各階層のノードを含む配列
displayMemberPathノードの表示名を格納するプロパティ名
childItemsPathノードの子項目を格納するプロパティ名
imageMemberPathノードの画像パスを格納するプロパティ名
autoCollapse展開するノードを1つに限定

autoCollapseプロパティの既定値はtrueですが、ここではTreeViewの動作を分かりやすくするためにfalseに設定しています。

TreeViewに表示するデータはitemsSourceプロパティで指定しますが、初期状態でこのプロパティに設定するデータを「data.js」に記載します。

function getData1() {
    return [
        { header: '親ノード 1', items: [
                { header: '子ノード 1.1' },
                { header: '子ノード 1.2' },
                { header: '子ノード 1.3' }
            ]
        },
        { header: '親ノード 2', items: [
                { header: '子ノード 2.1' },
                { header: '子ノード 2.2' }
            ]
        },
        { header: '親ノード 3', items: [
                { header: '子ノード 3.1' }
            ]
        }
    ];
}

作成したページを表示すると次のようになります。

ツリービューの表示

基本機能を使ってみる

TreeViewには多くの機能がありますが、ここでは次の基本的な機能をご紹介します。

  • チェックボックスの表示
  • ノードのドラッグ移動
  • 編集の許可
  • 画像の表示
  • ノードの無効化
  • 全ノードの開閉

チェックボックスの表示

各ノードの先頭にチェックボックスを表示する機能です。この機能はshowCheckboxesプロパティで設定できます。チェックボックスが表示されているときに親項目のチェックボックスをチェックすると、すべての子項目のチェックボックスがチェックされます。

// チェックボックス
document.querySelector('#checkbox').addEventListener('click', e => {
    treeView['showCheckboxes'] = e.target.checked;
});
チェックボックス型のツリービュー

ノードのドラッグ移動

allowDraggingプロパティをtrueに設定するとTreeViewコントロール内のノードをドラッグ＆ドロップ操作で移動できるようになります。異なるTreeViewコントロール間のドラッグ＆ドロップ操作もヘルプで解説している手法で可能になります。

// ドラッグを許可
document.querySelector('#drag').addEventListener('click', e => {
    treeView['allowDragging'] = e.target.checked;
});

ドラッグ＆ドロップ操作の前後の様子です。

ドラッグ前
ドラッグ後

編集の許可

既定の状態ではisReadOnlyプロパティがtrueになっているので、ノードの文字列を編集するはできませんが、このプロパティをfalseに設定すると編集が可能になります。

// 編集を許可
document.querySelector('#edit').addEventListener('click', e => {
    treeView['isReadOnly'] = !e.target.checked;
});
ノードの編集

画像の表示

ノードに画像を表示するには、itemsSourceプロパティに設定するデータの構造を変更する必要があります。データの中にノードに表示する画像のパスを設定し、TreeViewコントロールのimageMemberPathプロパティに該当するプロパティ名（下記の例ではimg）を指定します。

このサンプルでは「画像を表示」チェックボックスがチェックされたときにitemsSourceにgetData2()関数の戻り値を設定し、チェックが外されたときにgetData1()の戻り値を設定することで画像の表示と非表示を切り替えています。

// 画像を表示
document.querySelector('#image').addEventListener('click', e => {
    if(e.target.checked == true){
        treeView['itemsSource'] = getData2();
    }else{
        treeView['itemsSource'] = getData1();
    }
});
function getData2() {
    return [
        { header: '親ノード 1', img: 'resources/history.gif', items: [
                { header: '子ノード 1.1' },
                { header: '子ノード 1.2' },
                { header: '子ノード 1.3' }
            ]
        },
        { header: '親ノード 2', img: 'resources/science.gif', items: [
                { header: '子ノード 2.1' },
                { header: '子ノード 2.2' }
            ]
        },
        { header: '親ノード 3', img: 'resources/english.gif', items: [
                { header: '子ノード 3.1' }
            ]
        }
    ];
}
画像の表示

ノードの無効化

ノードのisDisabledプロパティをtrueにすることでそのノードを無効化することができます。無効化に設定されたノードは選択することができなくなります。

「選択ノードの無効化」チェックボックスがチェックされたときには、選択されているノードのisDisabledプロパティをtrueに設定してそのノードを無効化します。そしてチェックが外されたときには、すべてのノードのisDisabledプロパティをfalseに設定することで無効化を解除します。

// 選択ノードの無効化
document.querySelector('#disable').addEventListener('click', e => {
    if(e.target.checked == true){
        const node = treeView.selectedNode;
        if (node) {
            node.isDisabled = true;
        }
    }else{
        for (let node = treeView.getFirstNode(); node; node = node.next()) {
            node.isDisabled = false;
        }
    }
});
ノードの無効化

全ノードの開閉

どの階層のノードまでを折りたたむかを指定するcollapseToLevelメソッドを使うことで、すべてのノードの展開と折りたたみを行うことができます。

// すべて折りたたむ
document.getElementById('collapse').addEventListener('click', function () {
    treeView.collapseToLevel(0);
});

// すべて展開
document.getElementById('expand').addEventListener('click', function () {
    treeView.collapseToLevel(100000);
});

すべてのノードを展開したときと折りたたんだ時の様子を以下に示します。

全ノードを開く
全ノードを閉じる

今回ご紹介した各種設定は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。


さいごに

今回はWijmoに含まれているTreeViewコントロールの基本的な使用方法を紹介いたしました。Wijmoには、このTreeViewコントロールに加えて、ビューやデータセットそしてアプリケーション機能などの切り替えを可能にするTabPanelコントロールも用意されています。アプリケーションの洗練されたナビゲーション操作を実現するこれらのコントロールをぜひご検討いただけますと幸いです。

この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／