在我们项目中也如上篇文章介绍的那样,使用dojo中的dijit.tree,如下代码所示,大家可以看出,动态语言给我们很充足的可编程性。 主要提供:打开节点、拖拽排序等常用功能。
//创建数据源,确定基本根节点以及其children节点
var treeItems = [ {
id : "root",displayNameCh : _rootLabel,displayNameEn : _rootLabel,children : allItems
} ];
this.loadTreeByData (treeItems);
loadTreeByData : function(/*数据源*/treeItems){
var localeName = dojo.locale;
var displayName = "";
//国际化设置
if (localeName == "zh" || localeName == "zh-cn") {
displayName = "displayNameCh";
} else {
displayName = "displayNameEn";
}
var data = {
identifier : "id",label : displayName,items : treeItems
};
//把数据源treeItems包装一下
this.workStore = new dojo.data.ItemFileWriteStore({
data : data
});
//根据TreeStoreModel特性来创建tree所需model
this.workModel = new dijit.tree.TreeStoreModel({
store : this.workStore,childrenAttrs : [ "children" ]
});
//存在tree,则销毁
if (this.workTree) {
this.logger.debug("Destroy old tree");
if (this.workTree.destroyRecursive) {
this.workTree.destroyRecursive();
} else if (this.workTree.destroy) {
this.workTree.destroy();
}
this.workTree = null;
}
//创建tree单元,这里使用了一些tree相关的高级应用
this.workTree = new dijit.Tree({
model : this.workModel,openOnClick : false,dndController : "dijit.tree.dndSource",betweenThreshold : 5,onOpen : dojo.hitch(this,this.onRetrieveTag),onClick : dojo.hitch(this,this._onClickItem),onDblClick : dojo.hitch(this,this._onDbClickItem),checkItemAcceptance : dojo.hitch(this,this.onCheckItemAcceptance),persist : false
});
this.workTree.placeAt(this.containerNode);
this.startup();
//用于处理树节点之间的拖拽响应
this.connect(this.workTree.dndController,'onMouseDown',function(e) {
// 如果你的树上有滚动条,请加入如下代码,否则如果你选中了节点后拖动滚动条会出现节点拖拽
if (dijit.getEnclosingWidget(e.target) == this.workTree) {
this.workTree.dndController.mousedown = false;
return;
}
});
},