zTree异步加载(自定义图片)

 

zTree官网：点击打开链接

 

一：文件下载

点击首页右下角的ztree download，选择Guihub下载

点击Clone or download下载

 

 

 

二：相关包介绍

jquery.ztree.core-3.x.js   核心包（必须）

jquery.ztree.excheck-3.x.js  扩展包--实现复选框的功能（可选）

jquery.ztree.exedit-3.x.js    扩展包--实现编辑功能，例如删除、重命名等（可选）

zTreeStyle.css  定义zTree样式（必须）

 

导入zTree文件夹的时候，最好将下载的整个文件夹放到js下面，因为zTree的css依赖img也在文件夹中

 

三：页面准备容器

<div>
   <ul id="ztree" class="ztree"></ul>
</div>

这里需要注意class需要设置为ztree，否则可能会导致树的css样式不起作用

 

四：引入相关js、css文件

<!-- ztree的css -->
<link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!-- jquery和ztree相关js -->
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="js/ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script src="js/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>
<script src="js/ztree/js/jquery.ztree.exedit-3.5.min.js"></script>

 

 

 

五：js代码  

$(function() {
		initTree();
		var zTreeObj;
		//初始化根节点  
		function initTree() {
			$.get("/demo/ztree/initTree.do", function(data) {
				zTreeObj = $.fn.zTree.init($("#ztree"), setting, data);
				//zTreeObj.expandAll(true); //直接展开树结构
			});
		}
		var setting = {

			check : {//定义是否显示单选和复选框
				enable : true,
				chkStyle : "checkbox",
				chkboxType : {//勾选 checkbox 对于父子节点的关联关系
					"Y" : "s",
					"N" : "s"
				}
			/*单选框的设置
			chkStyle : "radio",
			radioType : "all"  // radio 的分组范围
			 */
			},
			view : {//显示相关的属性配置  
				selectedMulti : false
			},
			data : {//节点数据系列的属性配置  
				key : {
					selectedMulti : false,//设置是否允许同时选中多个节点
					showLine : false,//设置 zTree 是否显示节点之间的连线
				},
				simpleData : {
					enable : true,
					idKey : "id",//节点数据中保存唯一标识的属性名称  默认值："id"
					pIdKey : "pId"//节点数据中保存其父节点唯一标识的属性名称  默认值："pId"
				}
			},
			edit : {//编辑状态的属性配置  
				drag : {
					isCopy : false
				},
				enable : true,
				showRenameBtn : false,//设置是否显示编辑名称按钮
				renameTitle: "编辑节点名称",//编辑名称按钮的 Title 辅助信息
				showRemoveBtn : false,//设置是否显示删除按钮
				removeTitle: "删除节点",//删除按钮的 Title 辅助信息
			},
			async : {//异步加载数据操作  
				enable : true,//设置 zTree 是否开启异步加载模式
				url : "/demo/ztree/getTree.do",//Ajax 获取数据的 URL 地址
				autoParam : [ "id" ],//异步加载时需要自动提交的参数
				type : "get",//Ajax 的 http 请求模式
				dataFilter : ajaxDataFilter,//用于对 Ajax 返回数据进行预处理的函数
				dataType : "json"
			},
			//回调函数  
			callback : {
				beforeCheck : beforeCheck,//用于捕获 勾选 或 取消勾选 之前的事件回调函数
				onCheck : onCheck,//用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
				onClick: onClick,//用于捕获节点被点击的事件回调函数
				onAsyncSuccess: onAsyncSuccess,//用于捕获异步加载正常结束的事件回调函数
				onRightClick : onRightClick,//用于捕获 zTree 上鼠标右键点击之后的事件回调函数
			}
		};
		
		// 异步加载数据过滤器
		function ajaxDataFilter(treeId, parentNode, responseData) {
			return responseData;
		};

		//check选中前触发
		function beforeCheck(treeId, treeNode) {
			if(treeNode.isParent){//如果选中的是父节点，不让选中
	            return false;
	        }
		};
		
		//check选中时触发
		function onCheck(event, treeId, treeNode) {
			nodes = zTreeObj.getCheckedNodes(true);//获取所有选中的节点
			if(nodes[0] != null){
				console.log(nodes[0].id + ", " + nodes[0].name);//打印第一个选中节点的id
			}
		};
		
		//点击触发
		function onClick(event, treeId, treeNode) {
		    console.log(treeNode.id + ", " + treeNode.name);
		};
		
		//异步加载完成触发
		function onAsyncSuccess(event, treeId, treeNode, msg) {
		    console.log(msg);
		};

		//右击触发
		function onRightClick(event, treeId, treeNode) {
			//treeNode:鼠标右键点击时所在节点的 JSON 数据对象,如果不在节点上，則返回null
			console.log(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
		}

	})

 

 

六：css代码（自定义图片）

<style>
.ztree li span.button.icon1_ico_close {
	margin-right: 2px;
	background: url(img/school.png) no-repeat scroll 0 0
		transparent;
	vertical-align: top;
	*vertical-align: middle
}

.ztree li span.button.icon1_ico_open {
	margin-right: 2px;
	background: url(img/school.png) no-repeat scroll 0 0
		transparent;
	vertical-align: top;
	*vertical-align: middle
}

.ztree li span.button.icon2_ico_close {
	margin-right: 2px;
	background: url(img/close.png) no-repeat scroll 0 0
		transparent;
	vertical-align: top;
	*vertical-align: middle
}
.ztree li span.button.icon2_ico_open {
	margin-right: 2px;
	background: url(img/open.png) no-repeat scroll 0 0
		transparent;
	vertical-align: top;
	*vertical-align: middle
}

.ztree li span.button.icon3_ico_docu {
	margin-right: 2px;
	background: url(img/man.png) no-repeat scroll 0 0
		transparent;
	vertical-align: top;
	*vertical-align: middle
}

.ztree li span.button.icon4_ico_docu {
	margin-right: 2px;
	background: url(img/women.png) no-repeat scroll 0 0
		transparent;
	vertical-align: top;
	*vertical-align: middle
}

</style>

 

 

七：定义数节点对象

package com.debo.ztree;

public class Node {
	// 节点id
	private Integer id;
	// 父节点id
	private Integer pId;
	// 节点名称
	private String name;
	// 需要自定义图片时，使用该属性
	private String iconSkin;
	// 设置是否是父节点
	private Boolean isParent;
	// 当需要设置某个节点被选中的时候，通过该属性定义
	private Boolean checked;
	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;
	}
	public String getIconSkin() {
		return iconSkin;
	}
	public void setIconSkin(String iconSkin) {
		this.iconSkin = iconSkin;
	}
	public Boolean getIsParent() {
		return isParent;
	}
	public void setIsParent(Boolean isParent) {
		this.isParent = isParent;
	}
	public Boolean getChecked() {
		return checked;
	}
	public void setChecked(Boolean checked) {
		this.checked = checked;
	}

}

 

 

 

八：后台逻辑代码：模拟数据，以json格式的数据返回到jsp

package com.debo.ztree;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@RequestMapping("/ztree")
@Controller
public class ZtreeController {
	
	
	
	@ResponseBody
	@RequestMapping(value="/initTree",method=RequestMethod.GET)
	public Node initTree(){
		
		Node node = new Node();
		node.setId(0);
		node.setName("皇家大学");
		node.setIconSkin("icon1");
		node.setIsParent(true);
		node.setChecked(false);
		
		return node;
	}
	
	@RequestMapping("getTree")
	@ResponseBody
	public List<Node> getTree(@RequestParam("id")int id){
		//根据id去后台查询子节点,我在这直接模仿子节点数据
		List<Node> list = new ArrayList<Node>();
		if(id == 0){
			Node node = new Node();
			node.setId(1);
			node.setpId(0);
			node.setName("数计学院");
			node.setIconSkin("icon2");
			node.setIsParent(true);
			
			Node node1 = new Node();
			node1.setId(2);
			node1.setpId(0);
			node1.setName("体育学院");
			node1.setIconSkin("icon2");
			node1.setIsParent(true);
			
			list.add(node1);
			list.add(node);
		}
		if(id == 1){
			Node node = new Node();
			node.setId(3);
			node.setpId(1);
			node.setName("迪丽热巴");
			node.setIconSkin("icon4");
			node.setIsParent(false);
			
			Node node1 = new Node();
			node1.setId(4);
			node1.setpId(1);
			node1.setName("胡歌");
			node1.setIconSkin("icon3");
			node1.setIsParent(false);
			
			list.add(node1);
			list.add(node);
		}
		if(id == 2){
			Node node = new Node();
			node.setId(5);
			node.setpId(2);
			node.setName("刘翔");
			node.setIconSkin("icon3");
			node.setIsParent(false);
			
			Node node1 = new Node();
			node1.setId(6);
			node1.setpId(2);
			node1.setName("郭晶晶");
			node1.setIconSkin("icon4");
			node1.setIsParent(false);
			
			list.add(node1);
			list.add(node);
		}
		
		return list;
	}
	

}

 

 

 

九：效果图