dojo 的 dijit.tree 基本用法（转）

可以说dojo0.9bate的dijit.Tree太灵活了，功能太强大了。所以使用的时候定制和编程就要很多了。Dijit.Tree数据源必须是Store，常用的是dojo.data.JsonItemStore ，不能够使用inline方式。

下面给出两个例子，一个例子是最基础的，一个例子是动态生成的：

TREE

       @import "../js/dojo/resources/dojo.css";

       @import "../js/dijit/themes/tundra/tundra.css";

         

       djConfig="parseOnLoad: true, isDebug: true"

       src="../js/dojo/dojo.js">

      

              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);

                                   });  

                            });

      

              url="../js/dijit/tests/countries.json">

      

              labelAttr="name" typeAttr="type">

动态添加树节点：

function addNode(){

       //add one treeNode

       var _tree=dijit.byId("tree");

       var tdata={label:"FR",tree:_tree,item:{name:"FR",type:"one"}};  

       var child=new dijit._TreeNode(tdata);       

       _tree.addChild(child,1);

       child._updateLayout();

       _tree.getChildren()[2]._updateLayout();

       child.setChildren({});

       child._setExpando();

//      console.debug();

}

function addSecondNode(){

       // add a treenode for FR

       var _tree=dijit.byId("tree");

       var fr=_tree.getChildren()[1];

       var tdata=[{label:"Paris",item:{type:"city",name:"Paris"}}];

       fr.setChildren(tdata);

       fr.getChildren()[0].setChildren({});

       fr.isFolder=true;

       fr.isExpanded=false;

       fr._updateLayout();

       fr._setExpando();

}

function addThirdNode(){

       var _tree=dijit.byId("tree");

       var fr=_tree.getChildren()[1];

       var tdata={label:"pp",tree:_tree,item:{name:"pp",type:"city"}};   

       var child=new dijit._TreeNode(tdata);       

       child.setChildren({});

       fr.addChild(child);

       child._updateLayout();

       fr.getChildren()[0]._updateLayout();

}

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

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

test tree , dynamic add treenode

@import "../js/dojo/resources/dojo.css";
@import "../js/dijit/themes/tundra/tundra.css";

djConfig="parseOnLoad: true, isDebug: false"
src="/"";../js/dojo/dojo.js">

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");

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/22885108/viewspace-622750/，如需转载，请注明出处，否则将追究法律责任。

0

0

分享到：

上一篇： xmlhttp手册

下一篇： DOJO DIJIT.TREE 入门

请登录后发表评论 登录

全部评论

<%=items[i].createtime%>

<%=items[i].content%>

<%if(items[i].items.items.length) { %>

<%for(var j=0;j

<%=items[i].items.items[j].createtime%> 回复

<%=items[i].items.items[j].username%>   回复   <%=items[i].items.items[j].tousername%>： <%=items[i].items.items[j].content%>

<%}%> <%if(items[i].items.total > 5) { %>

还有<%=items[i].items.total-5%>条评论 ) data-count=1 data-flag=true>点击查看

<%}%>

<%}%>

<%}%>

转载于:http://blog.itpub.net/22885108/viewspace-622750/