ツリーUI - メニューや階層構造の表示に

ツリーUIは、Dojoでは「Tree」、Yahoo UIでは「TreeView」という名で実装されている。

Dojoの場合は、dojo.data.ItemFileReadStoreでツリーを構成するデータを読みこみ、dijit.Treeを使用して展開する。

HTMLファイル - treeview-dojo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="./js/dojo/dijit/themes/tundra/Tree.css" rel="stylesheet" type="text/css">
<link href="./js/dojo/dijit/themes/tundra/Tree_rtl.css" rel="stylesheet" type="text/css">
<title>Tree / Dojo</title>
<script type="text/javascript" src="./js/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script language="JavaScript" type="text/javascript">
<!--
    dojo.require('dojo.data.ItemFileReadStore');
    dojo.require('dijit.Tree');
    dojo.require('dojo.parser');

    // ツリーを定義するファイルをロード
    var store = new dojo.data.ItemFileReadStore({url:'./treeview-dojo.json'});
-->
</script>
</head>

<body class="tundra">

<h1>Tree / Dojo</h1>

<div dojoType="dijit.Tree" id="tree" store="store" query="{type:'topNode'}"></div>

</body>

</html>

JSONファイル - treeview-dojo.json

{
    'identifier': 'name',
    'label': 'name',
    items:
    [
        {
            name:'メニュー1',
            type:'topNode',
            children:
            [
                {_reference:'メニュー1-1'},
                {_reference:'メニュー1-2'}
            ]
        },
        {
            name:'メニュー1-1'
        },
        {
            name:'メニュー1-2'
        },
        {
            name:'メニュー2',
            type:'topNode',
            children:
              [
                {_reference:'メニュー2-1'},
                {_reference:'メニュー2-2'},
                {_reference:'メニュー2-3'}
              ]
        },
        {
            name:'メニュー2-1',
            children:
            [
                {_reference:'メニュー2-1-1'},
                {_reference:'メニュー2-1-2'}
            ]
        },
        {
            name:'メニュー2-1-1'
        },
        {
            name:'メニュー2-1-2'
        },
        {
            name:'メニュー2-2'
        },
        {
            name:'メニュー2-3'
        }
    ]
}

Firefoxでの動作イメージ

Internet Explorerでの動作イメージ

テーマが予めいくつか用意されており、最初からアニメーションつきの綺麗なデザインで使用できる。またどのツリーまで展開したかをクッキーとして自動的に処理してくれるため、2回目以降のアクセスでも最後に展開した状態で表示される。

実装は慣れるまでややとっつきにくい箇所があるが、dojo.dataはこのほかにもDojoのさまざまなウィジェットで応用が効くので、ぜひマスターしておきたいところだ。