ExtJS4.2学习(24)TreeStore使用详解



前面基础了那么多,现在来点厉害的,网上几乎没有这个详解了,希望大家仔细看,相信你一定能学会,任何ext的容器数据的核心都是store,所以掌握了它,任何动态效果都能搞定。wBz思考者日记网-束洋洋个人博客

看下Ext.data.TreeStore的结构:wBz思考者日记网-束洋洋个人博客

Ext.BasewBz思考者日记网-束洋洋个人博客
Ext.data.AbstractStorewBz思考者日记网-束洋洋个人博客
Ext.data.StorewBz思考者日记网-束洋洋个人博客
Ext.data.NodeStorewBz思考者日记网-束洋洋个人博客
Ext.data.TreeStore
wBz思考者日记网-束洋洋个人博客

 wBz思考者日记网-束洋洋个人博客

相关属性请自行查阅官方API文档,里面说的比我的详细,我就不一一介绍了,下面介绍重点内容,wBz思考者日记网-束洋洋个人博客

var store = Ext.create("Ext.data.TreeStore",{  
        model: "DeptModel",  
        // 根节点的参数是parentId  
        //nodeParam : 'deptParentId',  
        // 根节点的参数值是0  
        //defaultRootId : 0,  
        proxy:{   
            type:'ajax',    
            url:'/dept/showDept',  
            reader : {  
                type : 'json',  
                root : 'children'//数据    
            }  
        }  
    });

这是一颗完整树的代码,怎么才能让它变成异步或者同步树呢?wBz思考者日记网-束洋洋个人博客

很简单,你只要写出正确的JSON格式,它会自动加载。wBz思考者日记网-束洋洋个人博客

JSON格式大致这样:[{"自己的属性定义":"自己定义的属性的值","leaf":false,"expanded":true,"children":[{"自己定义的属性":"自己定义的属性的值"}]}]wBz思考者日记网-束洋洋个人博客

重要的是leaf和expanded属性wBz思考者日记网-束洋洋个人博客

leaf:顾名思义就是节点的意思,这里false代表下面还有节点,true代表下面没有节点,和我们平时的习惯不太一样,我也是实验了好多次才找出路的wBz思考者日记网-束洋洋个人博客

expanded:展开与否的意思,true代表展开,false代表不展开,与上面正好相反,不过它符合我们的习惯。这里expanded不设置即是false,那么这棵树就是异步树,设置true,那么就是同步树。不信你试试!wBz思考者日记网-束洋洋个人博客

 wBz思考者日记网-束洋洋个人博客

JSON数据需要注意以上2个节点属性即可。wBz思考者日记网-束洋洋个人博客

下面是我的一段逻辑处理代码,返回的对象会自动转换成JSON数据,你可以使用springMVC或者其他框架,只要组合成正确的JSON数据即可。wBz思考者日记网-束洋洋个人博客

@RequestMapping("showDept")  
    @ResponseBody  
    public List<Dept> Menus(HttpServletRequest req, HttpServletResponse resp) {  
        List<Dept> depts = deptService.findDepts();  
        List<Dept> deptList = new ArrayList<Dept>();  
        try {  
            if (depts.size() > 0) {  
                for (Dept dpt : depts) {  
                    List<Dept> deptNodes = deptService  
                            .findDeptByDeptFatherId(dpt.getDept_id());  
                    if (deptNodes.size() > 0) {  
                        for (Dept dptNode : deptNodes) {  
                            List<Dept> deptNodeList = new ArrayList<Dept>();  
                            List<Dept> deptNode = deptService  
                                    .findDeptByDeptFatherId(dptNode  
                                            .getDept_id());  
                            if (deptNode.size() <= 0) {  
                                dptNode.setLeaf(true); // 没有子节点了  
                                dptNode.setExpanded(false);// 不需要展开子节点了  
                                dpt.setExpanded(true);// 不展开根节点  
                                dpt.setLeaf(false);// 没有根节点了  
                            } else {  
                                dptNode.setLeaf(false);// 还有子节点  
                                dptNode.setExpanded(true);// 麻烦展开子节点吧  
                                dpt.setExpanded(false);// 展开根节点  
                                dpt.setLeaf(true);// 还有根节点  
                            }  
                            deptNodeList.add(dptNode);  
                            dpt.setChildren(deptNodeList);  
                        }  
                    }  
                    deptList.add(dpt);  
                }  
            }  
            for(Dept dpt:deptList){  
                if(dpt.getChildren()==null){  
                    dpt.setLeaf(true); //拜托,没有子节点,根节点就不用再展开了  
                }  
            }  
            return deptList;  
        } catch (Exception e) {  
            logger.error("获取部门数据错误:" + e);  
            e.printStackTrace();  
        }  
        return null;  
    }  

 wBz思考者日记网-束洋洋个人博客

我的JSON数据:wBz思考者日记网-束洋洋个人博客

[{"dept_id":"1","dept_name":"总部","dept_father_id":"0","dept_status":"AVAILABLE","description":"总部","create_time":1444220262000,"update_time":1444220798000,"leaf":false,"expanded":true,"children":[{"dept_id":"3","dept_name":"测试部","dept_father_id":"1","dept_status":"AVAILABLE","description":"测试部","create_time":1444403252000,"update_time":1444403255000,"leaf":true,"expanded":false,"children":null}]},{"dept_id":"4","dept_name":"总部2","dept_father_id":"0","dept_status":"AVAILABLE","description":"总部2","create_time":1444403289000,"update_time":1444403292000,"leaf":true,"expanded":false,"children":null}]  
wBz思考者日记网-束洋洋个人博客

我的treePanel是这样的:wBz思考者日记网-束洋洋个人博客

var tree = Ext.create('Ext.tree.Panel', {  
        renderTo: Ext.getBody(),  
        rootVisible: false,  
        region: 'center',  
        //selModel: sm,  
        loadMask:true, //显示遮罩和提示功能,即加载Loading……    
        columnLines:false, //列的边框  
        border: false,  
        forceFit:true, //自动填满表格   
        rowLines:true, //设置为false则取消行的框线样式  
        columns: columns,  
        store:store  
    });  

 wBz思考者日记网-束洋洋个人博客

sotre和其他对象一样,也具有监听事件,只要store.on("事件",function(方法参数){});即可,有itemclick、itemcontextmenu、afterrender等等事件。wBz思考者日记网-束洋洋个人博客

下面是效果图:wBz思考者日记网-束洋洋个人博客

TreeStore详解.jpgwBz思考者日记网-束洋洋个人博客

 wBz思考者日记网-束洋洋个人博客

看下无限极树节点:wBz思考者日记网-束洋洋个人博客

/** 
     * 返回所有部门数据 
     *  
     * @return 
     */  
    @RequestMapping("showDept")  
    @ResponseBody  
    public List<Dept> Menus(HttpServletRequest req, HttpServletResponse resp) {  
        List<Dept> depts = deptService.findDepts();  
        try {  
            List<Dept> deptList = treeDeptList(depts,"0");  
            return deptList;  
        } catch (Exception e) {  
            logger.error("获取部门数据错误:" + e);  
            e.printStackTrace();  
        }  
        return null;  
    }  
      
    //递归遍历树    
    public static List<Dept> treeDeptList(List<Dept> deptList,String fatherId){    
        List<Dept> deptChildList = new ArrayList<Dept>();      
        for(Dept dept:deptList){    
            if(fatherId.equals(dept.getDept_father_id())){  
                List<Dept> deptChildren = treeDeptList(deptList,dept.getDept_id());  
                dept.setChildren(deptChildren);  
                if(deptChildren.size()>0){    
                    dept.setLeaf(false);  
                    dept.setExpanded(true);// 需要展开子节点了        
                }else{    
                    dept.setLeaf(true);    
                    dept.setExpanded(false);// 不需要展开子节点了      
                }    
                deptChildList.add(dept);    
            }    
        }    
        
        for(Dept dpt:deptChildList){    
           if(dpt.getChildren()==null){      
                 dpt.setLeaf(true); //拜托,没有子节点,根节点就不用再展开了      
            }    
        }    
        return deptChildList;    
    }    

 wBz思考者日记网-束洋洋个人博客

 wBz思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridwBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridwBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingwBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格wBz思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldwBz思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件wBz思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorwBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 wBz思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解wBz思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目wBz思考者日记网-束洋洋个人博客

 wBz思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈