在我们项目中也如上篇文章介绍的那样,使用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; } }); },@H_404_11@