简单使用zTree

简单使用zTree

发布时间：2018年01月15日 22:25:48

1.下载zTree

2.添加css和js文件

<link rel="stylesheet" href="../zTreestyle.css" type="text/css">
<script src="../jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../zTree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../zTree/js/jquery.ztree.exedit.js"></script>

3.HTML：

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

4.JS：

(1)setting配置

var setting= {
		view: {
			showLine: false,//设置 zTree 是否显示节点之间的连线。默认是true
			addHoverDom: addHoverDom,//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
			removeHoverDom: removeHoverDom//用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
			
			//请务必setting.view.addHoverDom与 setting.view.removeHoverDom 同时使用
		},
		callback: {
			onClick: onClick//用于捕获节点被点击的事件回调函数
			//onClick点击后返回的参数如下：
			//1.event(js event 对象):标准的 js event 对象
			//2.treeId(String):对应 zTree 的 treeId，便于用户操控
			//3.treeNode(JSON):被点击的节点 JSON 数据对象
			//4.clickFlag(Number):节点被点击后的选中操作类型

		}
};

function addHoverDom(treeId, treeNode) {//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏
										//状态同 zTree 内部的编辑、删除按钮
	var aObj = $("#" + treeNode.tId + "_a");
	if ($("#diyBtn_"+treeNode.id).length>0) return;
	var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span>"
		+ "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id
		+ "' title='"+treeNode.name+"' οnfοcus='this.blur();'></button>";
	aObj.append(editStr);
	var btn = $("#diyBtn_"+treeNode.id);
	if (btn) btn.bind("click", function(){alert("diy Button for " + treeNode.name);});
}


function removeHoverDom(treeId, treeNode) {//用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏
										   //状态同zTree 内部的编辑、删除按钮
	$("#diyBtn_"+treeNode.id).unbind().remove();
	$("#diyBtn_space_" +treeNode.id).unbind().remove();
}

function onClick(e, treeId, treeNode) {//e：标准的js event对象；treeId(String):对应zTree的		
									   //treeId；treeNode(JSON)：被点击的节点
	e.stopPropagation();//阻止事件冒泡
	var zTree = $.fn.zTree.getZTreeObj(treeId);//获取需要进行操作的zTree对象，必须在zTree
											   //初始化后才可使用此方法
	if (!treeNode.open && treeNode.isParent) {//判断该节点是否未展开且是父节点，则展开节点（由于
								//zTree默认是双击展开节点，因此需自己写方法来实现单击展开节点）
    	zTree.expandNode(treeNode);//展开该节点
	}
}

(2)要显示的节点数据

var zNodes= [{
	id: 1, name:"父节点-1", open:true,//默认展开
	children: [//子节点
		{ id: 11, name:"子节点-1", open:true,
		children: [
				{ id: 111, name:"子节点-1-1", open:true,
				children: [
					{ id: 1111, name:"子节点-1-1-1" }
					]
				}
			]
		},
		{ id: 12, name:"子节点-2" },
		{ id: 13, name:"子节点-3" }
		]
	}, 
	{ id: 2, name:"父节点-2" }
];

(3)初始化zTree

$.fn.zTree.init($("#treeDemo"),setting,zNodes);
                  /*树放置的位置 树的配置 树的数据*/

5.效果图