项目中使用Tree/LazyTreeGrid

Tree/LazyTreeGrid

Tree:

dijit.Tree，renderer后如下图所示，就是我们平时所常见的树形结构，在项目中使用编程式创建tree。

也可以通过DojoAPI来看下飞速创建tree的demo：

require(["dojo/ready", "dijit/Tree", "dojo/data/ItemFileReadStore", "dijit/tree/ForestStoreModel"], function(ready, Tree, ItemFileReadStore, ForestStoreModel){                                                                                                                                            ready(function(){                                                                                                                                                   var store = new ItemFileReadStore({            url: "{{dataUrl}}/dijit/tests/_data/countries.json"        });                                           var treeModel = new ForestStoreModel({            store: store,            query: {"type": "continent"},            rootId: "root",            rootLabel: "Continents",            childrenAttrs: ["children"]        });        new Tree({            model: treeModel        }, "treeOne");    }); });

构建Tree，主要是给Tree提供data，而这个data需要进行格式化（设置root信息和children信息等），然后就能renderer出一个简单的tree。

• url：获取数据；
• query：根据设定的参数进行数据筛选，比如query：{“type”：“continent”}，就是筛选type==continent的数据。
• rootId：直接拿identify为root的object为根节点；
• rootLabel：根节点的displayName;
• childrenAttrs:设置子节点的标识；

我们在项目中，需要的tree功能要强大一些。如下代码，增加了一些function。

this.workTree = new dijit.Tree({
                        model : this.workModel,
                        openOnClick : false,
                        dndController : "dijit.tree.dndSource",  //节点拖拽事件
                        onOpen : function(event){   //打开节点，触发事件
                              //处理 节点的状态
                              if(event.children == undefined ){
                                    return;
                              }
                              var children = event.children;
                              for ( var i = 0; i < children.length; i++) {
                                    var item = children[i];
                                    var tNode = this.getNodesByItem(item);
                                    //可由此对节点进行处理
                              }
                              
                              
                        },
                        onClick : dojo.hitch(this, this._onClickItem), //单击节点，触发事件
                        onDblClick : dojo.hitch(this, this._onDbClickItem), //双击节点，触发事件
                        persist : false
                  });

我们也可以给tree节点绑定菜单：

                  

                  this.treeMenu = this._buildMenu();
                  
                  if (this.treeMenu) {
                        this.treeMenu.set("targetNodeIds",此参数值应为待绑定tree的dom); 
                        this.treeMenu.bindDomNode(此参数值应为待绑定tree的dom);
                        
                        var aspect = dojo["require"]("dojo.aspect");
                        //对菜单进行处理，在菜单渲染出来之前，可进行一系列逻辑操作
                        aspect.before(this.treeMenu, "_openMyself", dojo.hitch(this,                                                             this.clickItemBeforeOpenMenu));
                  }

LazyTreeGrid

LazyTreeGrid的创建、菜单绑定和对菜单的限制