ztree的简单使用及常见问题解决 递归所有节点

版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/qq_37712409/article/details/79639773

    一个setting一个$.fn.zTree.init(treeId,setting,data);即可创建一个简单的树，点击打开链接大家可以查看ztree的API

首先在JSP页面引入树的js和CSS，因为ztree依赖jQuery，所以先引入jQuery，

<script src="目录/jquery-1.8.3/jquery.min.js">script>
<link rel="stylesheet" type="text/css" href="目录/zTree_v3-3.5.22/css/zTreeStyle/zTreeStyle.css"/>
<script type="text/javascript" src="目录/zTree_v3-3.5.22/js/jquery-1.4.4.min.js">script>
<script type="text/javascript" src="目录/zTree_v3-3.5.22/js/jquery.ztree.core.js">script>

这里要说的 请求数据的方式有两种（水平有限），一种是通过ztree封装的ajax去请求数据，一种是直接用ajax去请求数据，为了记录下防止以后自己查看，这里把两种方式都粘贴出来。

首先是第一种，直接通过ztree去获取数据

var setting = {
        async :{
            enable :true,
            type : "post",
            url :"请求地址",
            autoParam :["id","pId"], //这里可以自定义后台接受参数的名如：autoParam :["id=myId","pId"] 后台就可以使用myId接收参数了
            otherParam :{"id":"1", "name":"test"} //这里可以自定义参数值传入后台，可选
        },
        callback :{  //这里可以处理请求返回来以后的一些事件
            onAsyncError : asyncError,
            onAsyncSuccess : asyncSuccess,
            onClick : companyTreeClick
            onExpand : zTreeOnExpand
        },
        data :{
            simpleData :{
                enable : true,
            }
        },
        view :{
            showLine : true
        }
};

ztree的配置有很多，可以满足你的业务需求，这里简单列一下，具体可以去查ztree API地址

第二种请求方式直接使用ajax请求即可(这里是监控一个下拉框的值，通过这个值去获取tree)

$("#id").change(function(){
        var id = $("#id").val();
        $.ajax({
            type :"post",
            dataType : "json",
            url :"url",
            data :{"id" : id},
            success : function (data){
                initTree("展示树ul标签id",data);
            console.log(data);
        }
        })

function initTree (id,data){
var setting = {
        callback :{
            onAsyncError : asyncError,
            onAsyncSuccess : asyncSuccess,
            onClick : companyTreeClick
            //onExpand : zTreeOnExpand
        },
        data :{
            simpleData :{
                enable : true,
            }
        },
        view :{
            showLine : true
        }
};
$j.fn.zTree.init($(id),setting,data);
}

这里要好好说一下了，因为ztree包也会引用一个jQuery，此处引用的是1.4.4.min.js，页面肯定会报错（$.fn.zTree.init($(id),setting,data)识别错误），如果没有可以不用关注这里，可能是jQuery冲突了，解决办法：

var $j = jQuery.noConflict();
$j.fn.zTree.init($(id),setting,data)

即可（俺是这么解决好的，不保证所有）

 下面的 enable表示：是否使用简单的数据模式（Array）

var setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0
        }
    }
};
var treeNodes = [
    {"id":1, "pId":0, "name":"test1"},
    {"id":11, "pId":1, "name":"test11"},
    {"id":12, "pId":1, "name":"test12"},
    {"id":111, "pId":11, "name":"test111"}
];

 上面通过ajax返回的data就是Array数据模式

{"id":111, "pId":11, "name":"test111","isOpen":true/false}

接下里就是如何实现递归父子级的树（把要展示的树写成如上格式）

List <Department> setDepartment = new ArrayList<Department>();
   @Override
   public List<DepartmentTreeDto> findPrimaryDepartmentList(Integer id) {
       setDepartment.clear();
       List<DepartmentTreeDto> departmentTreeDtoList = new ArrayList<DepartmentTreeDto>();

//查询所有下级部门
        List<Department> childDep = departmentDao.findDepartmentList(id);
        Department department = departmentDao.findPrimaryDepartmentById(id); //根部门
        DepartmentTreeDto departmentTreeDto = new DepartmentTreeDto(department.getId(),department.getName());//封装成要返回的数据模型
        departmentTreeDto.setIsParent(true);//表示有子部门，可以展开
        departmentTreeDtoList.add(departmentTreeDto);
        List<Department> digui = digui(childDep);

//处理递归所有数据的父子关系和是否有下级部门
        for (Department department2 : digui) {
            DepartmentTreeDto departmentTreeDto2 = new DepartmentTreeDto(department2.getId(),department2.getName());
           if(department2.getChildDep() != null && department2.getChildDep().size()>0){//有子部门时
               departmentTreeDto2.setIsParent(true);
               departmentTreeDto2.setpId(department2.getParentDep().getId());
               departmentTreeDtoList.add(departmentTreeDto2);
           }else{ //无子部门时
               departmentTreeDto2.setIsParent(false);
               departmentTreeDto2.setpId(department2.getParentDep().getId());
               departmentTreeDtoList.add(departmentTreeDto2);
           }

        }
        return departmentTreeDtoList;
    }

//递归
    public List<Department> digui(List<Department> depList){
        if(depList.size()>0){
            for (Department dep : depList) {
                List<Department> childDep = departmentDao.findDepartmentList(dep.getId());
                if(childDep.size()>0){
                    setDepartment.add(dep);
                    digui(childDep);
                } else {
                    setDepartment.add(dep);
                }

            }
        }
        return setDepartment;
    }