DojoでTreeを使う - 平松祥史の日記

ドキュメントを読んだりいろいろ試したりしているが、なにか誤解してるかもしれない。

dijit.Treeウィジェットに、ツリー構造の中身をdojo.dataを使って指定する。
dojo.data.ItemFileReadStoreを使うとJSONで書けるなる（XMLとかCVSでデータを書けるオブジェクトも別にある）。

<html>
<head>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");

    dojo.require("dojo.parser"); 
</script>
<style type="text/css">
    @import "dojo/resources/dojo.css";
    @import "dijit/themes/tundra/tundra.css";
</style>
</head>
<body class="tundra">
<div dojoType="dojo.data.ItemFileReadStore" jsId="treeData"
     url="test_tree.json"></div>
<div dojoType="dijit.Tree" id="mytree" store="treeData"
     labelAttr="node_name" label="Root">
</div>
</body>
</html>

test_tree.jsonの中身は以下のようになる。

{
'identifier' : 'node_id',
'label' : 'node_name',
'items' : [
  {'node_id':1, 'node_name': 'node1'},
  {'node_id':2, 'node_name': 'node2',
   'children': [{'node_id':3, 'node_name':'node3'},
                {'node_id':4, 'node_name':'node4'}]},
  {'node_id':5, 'node_name': 'node5'}
]
}

dojo.data.ItemFileReadStoreは必ずしもdijit.Treeと組み合わせて使う訳ではない。
diijt.Treeに使うときは、labelとidentifierが指定されている必要がある。
dojo.dataのオブジェクトはdivを使って宣言する。
jsIdはDOMのIDとは別物。