动态加载 dojoTree.带复选框

原文:http://blog.sina.com.cn/u/1779423465

动态加载 dojoTree.带复选框

定义div  -->       <div id="CheckboxTree">    
  
初始化加载父节点(jquery发送post请求)-->    $.post(url, param,finish,"json");
使用struts2(struts.xml) -->  
                                                   
                                          
使用spring管理(spring.xml) -->                                                                                     
action (注意注入,还有get,set方法)-->    @SuppressWarnings({"rawtypes", "unchecked" })
        public String findAllRegion(){
                List list = iControl.getAllRegion();
                ArrayList sList = (ArrayList)list;
                arrayList = sList;
                return SUCCESS;
        }
接口 -->   List getFirstRegion();
实现 -->  @Transactional(propagation=Propagation.REQUIRED,readOnly=true)
        public List getFirstRegion() {
                List jdMap = mngJdMDao.getAllStreet();
                return jdMap;
        }
DAO -->     @SuppressWarnings("unchecked")
        public List getAllStreet() {
                StringBuilder strHql = new StringBuilder();
                strHql.append("from MngJdM as jd order by jd.code");
                List list = (List) hibernateHelper.getList(
                                strHql.toString(), null, false, 0, 0);
                return list;
        }
前端 finish 回调函数(轮到dojo上场了,加载dojo所需要的脚本)-->  function finish(res){
                                                                     require([
                                                                    "dojo/ready",
                                                                    "dojo/data/ItemFileWriteStore",
                                                                    "cbtree/Tree",                    // Checkbox tree
                                                                    "cbtree/models/ForestStoreModel"  // ForestStoreModel
                                                                    ])
加载 一棵树所需要的内容 -->  function( ready, ItemFileWriteStore, Tree, ForestStoreModel) {
                                                  var data = { "identifier": "name", 
                                                  "label": "name",  
                                                  "items":  eval_r('('+ res.rows+')')    //返回的数据格式,必须是json对象
                                                   };
                                                   var store = new ItemFileWriteStore( { data: data });
dojotree 需要的数据源必须是store
需要加载一段方法让树在初始化加载父节点的时候有左边那个加号(默认他有子节点)-->
model.mayHaveChildren = function(item)  {
                    if(item.root)  
                                    {  
                                        return true;  
                                    }  
                                    else  
                                    {  
                                        //这里认为初始化树的时候对于每一个节点的数据项中都有type属性,根据属性判断  
                                        return (model.store.getValue(item, 'type') != 'haha')  
                                    } 
            }



加载  -->   var tree = new Tree( { model: model, id: "earthTree" }, "CheckboxTree" );
            tree.connect(tree, 'onClick', clickTreeNode);  
clickTreeNode为复选框点击事件,可自写点击监听事件
function clickTreeNode(item,node,evt)  
                        {  
                             //alert(item.name[0]+"是否被选中:"+item.checked[0]);
                        } 

启动  ---> tree.startup();
在写一个加号点击事件
var oldExpand = dijit.Tree.prototype._onExpandoClick;  
                        dojo.extend(dijit.Tree, {  
                            _onExpandoClick: function(message)  
                            {  
                                var node = message.node;  //获取点击的那个目录
                                reloadNode(node);  //点击的时候加载下级目录
                                oldExpand.apply(this, arguments);  //重新加载
                            }  
                        });

重新加载 -->  function reloadNode(node){
                          //如果有下级节点,更新数据源
                        var store = node.tree.model.store;  
                         function finish(nodeList){
                                         dojo.forEach(nodeList, function(x){    
                                store.newItem(x,{parent:nodeItem, attribute: 'children'});  
                            })
                        //如果没有下级节点,关闭这个节点
                       for(var i=0;i< node.getChildren().length;i++){
                             node.getChildren().expand()
                             }                   
}

你可能感兴趣的:(tree,dojo)