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

    一个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;
    }

好了 全是干货 废话不多说，一起进步，有错欢迎指出