zTree的试炼

前言

jQuery的插件特别多，前几天博主盯上了zTree，这个有名的jquery树插件，然后通过网上一些别人的资料，以及官方的API，将zTree稍过了下，今天就将其分享出来！

功能介绍

初始化zTree
zTree的配置
添加/删除/获取/修改节点
全选/反选节点
节点上移下移
节点右键菜单

贴代码

<!DOCTYPE html>
<html>
	<head>
		<title> zTreeDemo </title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="css/demo.css" type="text/css">
		<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
		<style type="text/css">
			#rMenuUl{
				border: 1px dashed #617775;
				display: none;
			}
			#rMenuUl li{
				list-style: none;
				text-align: center;
				width: 100px;
			}
			#rMenuUl li:hover{
				background-color: #617775;
				color: white;
				cursor: pointer;
			}
		</style>	
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>
		<script type="text/javascript">
			var zTreeObj;
			var nowRightClickNode = null;
			// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
			var setting = {
				treeId: "",
				treeObj: null,
				view: {
					selectedMulti: true, //设置是否能够同时选中多个节点
					showIcon: true, //设置是否显示节点图标
					showLine: true, //设置是否显示节点与节点之间的连线
					showTitle: true, //设置是否显示节点的title提示信息
				},
				data: {
					simpleData: {
						enable: false, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式）
						idKey: "id", //设置启用简单数据格式时id对应的属性名称
						pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
					}
				},
				check: {
					enable: true //设置是否显示checkbox复选框
				},
				callback: {
					/*定义节点单击事件回调函数*/
					onClick: onClick,
					/*定义节点右键单击事件回调函数*/
					onRightClick: OnRightClick,
					/*定义节点重新编辑成功前回调函数，一般用于节点编辑时判断输入的节点名称是否合法*/
					beforeRename: beforeRename,
					/*定义节点双击事件回调函数*/
					onDblClick: "onDblClick",
					/*定义节点复选框选中或取消选中事件的回调函数*/
					onCheck: onCheck
				},
				async: {
					/*设置启用异步加载*/
					enable: true,
					/*异步加载类型:post和get*/
					type: "get",
					/*定义ajax提交参数的参数类型，一般为json格式*/
					contentType: "application/json",
					/*定义数据请求路径*/
					url: "/Design/Get",
					/*定义提交时参数的名称，=号前面标识节点属性，后面标识提交时json数据中参数的名称*/
					autoParam: ["id=id", "name=name"]
				}
			};
			/*节点数据*/
			var zNodes = [{
					name: "test1",
					open: true,
					children: [{
						name: "test1_1"
					}, {
						name: "test1_2"
					}]
				},{
					name: "test2",
					open: true,
					children: [{
						name: "test2_1"
					}, {
						name: "test2_2"
					}]
				}
			];
			$(document).ready(function() {
				/*初始化时会返回该树*/
				var zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
				/*获取所有选中的节点*/
				$("#getCheckedNodes").click(function(){
					var nodes = zTreeObj.getCheckedNodes();
					var str = "选中的节点数：" + nodes.length;
					$.each(nodes, function(index,n) {
						str += "\n" + n.name ;
					});
					alert(str);
				});
				/*添加节点*/
				$("#addNode").click(function() {
					/*获取到该树*/
					var tree = $.fn.zTree.getZTreeObj("treeDemo");
					/*
					 *  parentNode:指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可
						index:新节点插入的位置（从 0 开始），index = -1 时，插入到最后，此参数可忽略
						newNodes：需要增加的节点数据 JSON 对象集合，数据只需要满足 zTree 的节点数据必需的属性即可 
						isSilent：true 时，添加节点后不展开父节点，其他值或缺省状态都自动展开
					 * 
					 * */
					tree.addNodes(null, 2, [{
						name:"hello",
						open : true ,
						children : [
							{name:"hello1"} , {name:"hello2"}
					]}], false);
				});
				/*全选所有节点*/
				$("#checkAll").click(function(){
					var tree = $.fn.zTree.getZTreeObj("treeDemo");
					/*checked参数为true时全部勾选，为false时全部取消勾选。*/
					tree.checkAllNodes(true);
				});
				/*反选所有节点*/
				$("#checkAllNo").click(function(){
					var tree = $.fn.zTree.getZTreeObj("treeDemo");
					var nodes = tree.getNodes();
					$.each(nodes, function(index,n) {
						/*
						 * check_Child_State子节点勾选状态
						 * -1	不存在子节点 或 子节点全部设置为 nocheck = true
							0	无 子节点被勾选
							1	部分 子节点被勾选
							2	全部 子节点被勾选
						 * */
						if(n.check_Child_State == 0){
							checkXNode(tree , n);
						}else{
							checkCNode(tree , n);
						}
					});
				});

			});
			/*通过递归来反选某节点*/
			function checkCNode(tree , node){
				if(node.children != null){
					if(node.check_Child_State == 2){
						/*原来的子节点全被选中*/
						tree.checkNode(node,false);
						$.each(node.children, function(index , n) {
							checkCNode(tree,n);
						});
					}else{
						$.each(node.children, function(index , n) {
							if(n.checked){
								checkCNode(tree , n);
							}else{
								checkXNode(tree,n);
							}
						});
					}
				}else{
					/*node无子节点*/
					tree.checkNode(node,false); 
				}
			}
			/*通过递归来选择某节点*/
			function checkXNode(tree,node){
				tree.checkNode(node);
				if(node.children != null){
					$.each(node.children, function(index , n) {
						checkXNode(tree , n);
					});
				}
			}
			/*通过递归将某节点置为未选*/
			function checkNNode(tree , node){
				tree.checkNode(node,false); 
				if(node.children){
					$.each(node.children, function(index , n) {
						checkNNode(tree , n);
					});
				}
			}
			/*节点单击事件*/
			function onClick(e, treeId, treeNode) {
				/*如果不是叶子结点，结束*/
				if(treeNode.isParent)
					return;
				/*获取当前结点上的相关属性数据，执行相关逻辑*/
				alert(treeNode.name);
			};
			/*节点复选框事件*/
			function onCheck() {
				/*获取树对象*/
				var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
				/*获取勾选状态改变的节点*/
				var nodes = treeObj.getChangeCheckedNodes();
				var designIds = [];
				/*定义初始勾选状态为未勾选*/
				var status = 0;
				if(nodes[0].checked)
					/*如果状态改变节点为勾选状态，说明当前操作是从未勾选变为已勾选。*/
					status = 1;
				$.each(nodes, function(i, item) {
					/*将状态改变的节点id输出到数组*/
					designIds.push(item.id);
					/*将节点的初始状态置为当前状态。否则每次勾选操作获取状态改变节点时只会跟树初始化的状态相比较。*/
					item.checkedOld = item.checked;
				})
				$.ajax({
					type: "Post",
					url: "url",
					data: {
						"designIds": designIds
					},
					success: function(data) {
						RealBimOcx.BatchAddSubClrInfoBegin();
						$.each(data.result, function(i, item) {
							/*这里根据发生改变的节点是勾选还是为勾选进行相关逻辑操作。*/
							if(status == 1)
								RealBimOcx.AddSubClrInfo(item, 255, 255, 0);
							else
								RealBimOcx.AddSubClrInfo(item, 0, 255, 0);
							if(i % 100 == 0) {
								RealBimOcx.BatchAddSubClrInfoEnd();
								RealBimOcx.BatchAddSubClrInfoBegin();
							}
						})
						RealBimOcx.BatchAddSubClrInfoEnd();
					}
				})
			};
			/*节点右键单击回调函数*/
			function OnRightClick(event, treeId, treeNode) {
				nowRightClickNode = treeNode;
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				$("#treeDemo").hide();
				if(treeNode){
					/*点击的是节点*/
					if(treeNode.getParentNode() == null){
						zTree.cancelSelectedNode();
						/*根据鼠标位置显示右键操作面板*/
						showRMenu("root", event.clientX, event.clientY);
					} else if(!treeNode.noR) {
						zTree.selectNode(treeNode,false,false);
						showRMenu("node", event.clientX, event.clientY);
					}
				}
				$("#treeDemo").show();
			}
			/*根据节点类型，控制右键操作菜单哪些可用哪些不可用*/
			function showRMenu(type, x, y) {
				$("#rMenu ul").show();
				if(type == "root") {
					$("#m_del").hide();
					$("#m_edit").hide();
					$("#m_up").hide();
					$("#m_down").hide();
					$("#m_ulevel").hide();
					$("#m_dlevel").hide();
					$("#m_add").addClass('mboder');
				} else {
					$("#m_del").show();
					$("#m_edit").show();
					$("#m_up").show();
					$("#m_down").show();
					$("#m_add").removeClass('mboder');
					$("#m_ulevel").show();
					$("#m_dlevel").show();
				}
				$("#rMenu").css({
					"top": y + "px",
					"left": x + "px",
					"display": "block"
				});
				$("body").bind("mousedown", onBodyMouseDown);
			}
			/*隐藏右键面板*/
			function hideRMenu() {
				var rMenu = $("#rMenu");
				if(rMenu) rMenu.css({
					"display": "none"
				});
				$("body").unbind("mousedown", onBodyMouseDown);
			}
			/*单击页面其他位置 隐藏右键面板*/
			function onBodyMouseDown(event) {
				if(!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
					$("#rMenu").css({
						"display": "none"
					});
				}
			}
			/*增加节点*/
			function addTreeNode() {
			 	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				hideRMenu();
				var name = window.prompt("请输入新增的子节点的名称：");
				if(name == null || name == "")return;
				var newNode = {
					name: name
				};
				newNode.checked = nowRightClickNode.checked;
				newNode.pid = nowRightClickNode.id;
				zTree.addNodes(nowRightClickNode, newNode);
				/*得到新增加的节点*/
				var node = zTree.getNodeByParam("name", name, null); 
				/*选中新增加的节点*/
				zTree.selectNode(node);
				/*让新增加的节点处于编辑状态*/
				zTree.editName(node); 
			}
			/*编辑节点*/
			function editTreeNode() {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				/*得到选中节点集合*/
				var nodes = zTree.getSelectedNodes(); 
				if (nodes && nodes.length > 0) {
					/*得到选中节点的父节点*/
					var parent = nodes[0].getParentNode(); 
					if (parent) {
						/*如果选中节点父节点存在，将当前节点的pid属性值设置为父节点的id*/
						nodes[0].pid = parent.id; 
					}
					/*让选中节点处于编辑状态*/
					zTree.editName(nodes[0]); 
				}
				hideRMenu();
			};
			/*节点编辑状态离开时触发事件 */
		    /*编辑并保存节点（对编辑的检查）*/
		    function beforeRename(treeId, treeNode, newName, isCancel) {
				if (newName.length == 0) { //节点名称判断
					alert("节点名不能为空。");
					return false;
				}
				return true;
			};
			/*删除节点数据 */
			function removeTreeNode() {
			 	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				hideRMenu();
				var nodes = zTree.getSelectedNodes();
				if (nodes && nodes.length > 0) {
					if (nodes[0].children && nodes[0].children.length > 0) {
						if(window.confirm("包含下级子节点，是否连带删除？")){
							zTree.removeNode(nodes[0]);
						}
					} else {
						zTree.removeNode(nodes[0]);
					}
				}
			};
			/*上移*/
			function m_up(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				hideRMenu();
				var nodes = zTree.getSelectedNodes();
				var n = nodes[0];
				if(n && !n.isFirstNode){
					zTree.moveNode(n.getPreNode(),n,"prev");
				}
			}
			/*下移*/
			function m_down(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				hideRMenu();
				var nodes = zTree.getSelectedNodes();
				var n = nodes[0];
				if(n && !n.isLastNode){
					zTree.moveNode(n.getNextNode(),n,"next");
				}
			}
			/*重置节点*/
			function resetTree(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				hideRMenu();
				var nodes = zTree.getSelectedNodes();
				if(nodes)checkNNode(zTree , nodes[0])
			}
			/*升一级*/
			function uLevel(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				hideRMenu();
				var nodes = zTree.getSelectedNodes();
				var n = nodes[0];
				if(n){
					zTree.moveNode(n.getParentNode(),n,"next");
				}
			}
			/*降一级*/
			function dLevel(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				hideRMenu();
				var nodes = zTree.getSelectedNodes();
				var n = nodes[0];
				if(n){
					/*默认往下一个节点降*/
					/*zTree.moveNode(n.getNextNode(),n,"inner");*/
				}
			}
		</script>
	</head>
	<body>
		<div>
			<ul id="treeDemo" style="background-color: #7EC4CC;" class="ztree"></ul>
		</div>
		<button id="getCheckedNodes">获取选中的节点</button>
		<button id="addNode">添加节点</button>
		<button id="checkAll">全选所有节点</button>
		<button id="checkAllNo">反选所有节点</button>
		<!--自定义的右键弹出面板-->
		<div id="rMenu" style="z-index:100;position: absolute;background-color: white;">
			<ul id="rMenuUl"onselectstart="return false;">
				<li id="m_add" onclick="addTreeNode()">新增节点</li>
				<li id="m_del" onclick="removeTreeNode()">删除节点</li>
				<li id="m_edit" onclick="editTreeNode()" style="border-bottom:1px solid #cecece">编辑节点</li>
				<li id="m_up" onclick="m_up()">上移</li>
				<li id="m_down" onclick="m_down()" style="border-bottom:1px solid #cecece">下移</li>
				<li id="m_reset" onclick="resetTree()">重置节点</li>
				<li id="m_ulevel" onclick="uLevel()">升一级</li>
				<li id="m_dlevel" onclick="dLevel()">降一级</li>
			</ul>
		</div>
	</body>
</html>

效果展示

http://github.ifdream.xin/demo/zTree/zTreeDemo.html

资源文件链接

http://github.ifdream.xin/css/zTree/demo.css
http://github.ifdream.xin/css/zTree/zTreeStyle.css
http://github.ifdream.xin/css/zTree/img.zip
http://github.ifdream.xin/js/jquery.min.js
http://github.ifdream.xin/js/zTree/jquery.ztree.all.min.js

结语

zTree插件的功能很强大，官方API也很详细，博主才只是略学了一二，读者应该学不止于此，可以上官方API上看看，再进一步学学，也可以在下面留言，和博主探讨，本文若有不足希望大家能够指出，一起学习，一起进步，谢谢！