关于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属性为图标属性,这边可以设置为自己的图标,具体实现效果图: