可以说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">

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博客 ” ，链接：https://blog.itpub.net/22885108/viewspace-622750/ ，如需转载，请注明出处，否则将追究法律责任。

ITPub博客

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

最新文章