关于Ztree的一些使用心得

现在基本上每个网页都得用到tree,由于Ztree是中国人写的,所以中文文档比较齐全,基本的一些应用需求都能到文档上找到答案,这段时间使用Ztree做过一些简单应用,总结一下一些常用的使用方法,直接在前端写数据的形式文档上已经很全了,这里主要讲一下从后端获取数据到tree上

通过AJAX从后台拿到对应数据,并将tree初始化

 $(function(){  
             //查询所有的菜单信息  
             $.ajax({  
                 type:'post',  
                 url: "${ctx}/notify/getData",
                 success:function(result){  


                     var setting = {
                            check: {
                                enable: true
                            },
                            data: {
                                simpleData: {
                                    enable: true
                                }
                            },
                            chkboxType: { "Y": "p", "N": "s" }
                        };

                     eval("var ztreenode="+result);  
                     $.fn.zTree.init($("#tree"),setting,ztreenode);  
                 }  
             });  
         });  

前端获取选择的所有父节点,子节点

    var s_child="",s_parent="";
                var treeObj = $.fn.zTree.getZTreeObj("tree");//树控件
                var content=$("#content").val();
                var flag=$("#flag").val();
                var nodes = treeObj.getCheckedNodes(true);//获取所有选择的节点
                if(nodes.length==0){
                    alert("请选择人员");
                }else if(content==null || content==""){
                    alert("请输入通知内容");
                }else if(nodes.length!=0 & content!=null & content!=""){
                for(var i=0;i<nodes.length;i++){
                    if(nodes[i].isParent){
                        s_parent+=nodes[i].id+",";//父节点
                    }else{
                        s_child+=nodes[i].id+",";//子节点
                    }
                }

后端写了一个tree的实体类,专门用来处理tree类型的数据

public class DeptEmployeeTree {

    private Integer id;
    private Integer pId;
    private String name;
    private String icon;
    public String getIcon() {
        return icon;
    }
    public void setIcon(String icon) {
        this.icon = icon;
    }
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }

    public Integer getpId() {
        return pId;
    }
    public void setpId(Integer pId) {
        this.pId = pId;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }


}

如果需要对tree进行更为详细的一些设置,自己添加相对应的tree的属性,一定要有 id ,pid,name

List<Dept> depts=deptService.findAllDept(); //从数据库中获取所有部门
List<Employee>employees=employeeService.findAllEmployees();//获取所有雇员
List<DeptEmployeeTree> list=new ArrayList<>(); //DeptEmployeeTree这个是对应的Tree实体
    int k=0;
        for (int i = 0; i < depts.size(); i++) {
            DeptEmployeeTree tree=new DeptEmployeeTree();
            tree.setId(depts.get(i).getId());
            tree.setpId(0);
            tree.setIcon("/chrm/images/dept.gif");//自定义Tree图标
            tree.setName(depts.get(i).getName());
            if (k<depts.get(i).getId()) {
                k=depts.get(i).getId();
            }
            list.add(tree);
        }

        for (int j = 0; j < employees.size(); j++) {
            DeptEmployeeTree tree=new DeptEmployeeTree();
            tree.setId(employees.get(j).getId()+k);
            tree.setpId(employees.get(j).getDept().getId());
            tree.setIcon("/chrm/images/person.gif");
            tree.setName(employees.get(j).getName());
            list.add(tree);
        }
        Gson gson =new Gson();
        String zNodes=gson.toJson(list);
        return  zNodes;

关于上面的K,因为我数据库中设置的是自增的ID,所以俩个表的ID有可能回相同,部门为父节点,人员为子节点,为了使ID不冲突,我设置了K取得本次查询的部门的最大ID,然后人员那边在加上这个最大ID,解决冲突,后续处理前台传过来的数据时,多传一个K值,然后记得减掉就行了,Icon属性为图标属性,这边可以设置为自己的图标,具体实现效果图: