2009年5月20日星期三

转载于 2009-05-20 16:19:00 发布 · 651 阅读

文章标签：

#tree #function #dojo #import #reference #query

DOJO 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了 Dojo 框架中 dijit.Tree 组件的基本用法与动态添加节点的方法，并提供了实例代码。同时探讨了如何实现懒加载及不同数据源的应用。

Dojo学习笔记--dijit.Tree

使用恐怖的dijit.Tree
可以说dojo0.9bate的dijit.Tree太灵活了，功能太强大了。所以使用的时候定制和编程就要很多了。Dijit.Tree数据源必须是Store，常用的是dojo.data.JsonItemStore ，不能够使用inline方式。下面给出两个例子，一个例子是最基础的，一个例子是动态生成的

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TREE</title>
<style type="text/css">
       @import "../js/dojo/resources/dojo.css";
       @import "../js/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript"
       djConfig="parseOnLoad: true, isDebug: true"
       src="../js/dojo/dojo.js"></script>
       <script>
              dojo.require("dojo.data.JsonItemStore");
              dojo.require("dijit.Tree");
                            dojo.addOnLoad(function(){
                                   dojo.subscribe("tree", null, function(message){
                                          console.log("sn:"+message.event);
                                          console.log("sn:"+message.node.item.name);
                                   });
                            });
       </script>
</head>
<body class="tundra">
<div dojoType="dojo.data.JsonItemStore" jsId="continentStore"
              url="../js/dijit/tests/countries.json"></div>
       <div dojoType="dijit.Tree" id=tree store="continentStore" query="{type:'continent'}"
              labelAttr="name" typeAttr="type"></div>
</body>
</html>

动态添加树节点：

如果要懒加载一个树，就需要继承JsonItemStore，可以参考/dojox/data/demos/里面的例子。如果想从其他数据源得到树，可以参考dojox.data里面的其他store.总之，tree的数据源必须是Store。

最新版本的dojo取消了jsonitemstore，使用了IterFileReadStore。（子节点的定义不一样了，多了个下划线。）
所以如果想要动态创建一个树，必须修改一下程序。
例子如下：

<html>
<head>
<title>test tree , dynamic add treenode</title>
<style type="text/css">
@import "../js/dojo/resources/dojo.css";
@import "../js/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true, isDebug: false"
src="/"";../js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.Tree");
dojo.require("dojo.data.ItemFileReadStore");

function init(){
var treeData={
items: [
{ name:'China', type:'one',
children:[{_reference:'beijing'}] },
{ name:'beijing', type:'city'},
{ name:'USA' , type:'one'},
{ name:'UK' , type:'one'}
],
identifier: 'name',
label: 'name'
};
var store1=new dojo.data.ItemFileReadStore({data:treeData});

var _tree=new dijit.Tree({
id:'tree',
store:store1,
query:{type:'one'},
labelAttr:"name",
typeAttr:"type"},dojo.byId("tree"));

console.log(store1._getItemsArray()[0].name);
}
dojo.addOnLoad(init);

function openNode(message){
var node=message.node;
if(message.event!="toggleOpen")return;

console.log('click');
}
dojo.subscribe("tree",null,"openNode");

</script>
</head>
<body class="tundra">
<div id="tree"></div>
</body>
</html>