JS插件之Ztree的使用

最新推荐文章于 2025-04-17 08:30:00 发布

qq_34368587

最新推荐文章于 2025-04-17 08:30:00 发布

阅读量1.3k

点赞数

分类专栏： Js 文章标签： Js

本文链接：https://blog.youkuaiyun.com/qq_34368587/article/details/79694545

版权

Js 专栏收录该内容

3 篇文章

订阅专栏

zTree是一个基于jQuery的多功能树形插件，以其高性能、灵活配置和多种功能组合著称。要使用zTree，需要引入jQuery库及zTree的核心和扩展检查功能的js文件。基本操作包括页面加载时初始化树形结构、选中节点、全选/全取消节点、获取选中节点id，以及设置加载和保存时的动画效果。更多高级功能可参考官网API和示例进行深入学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

官网地址：http://www.treejs.cn/v3/main.php#_zTreeInfo

样例：

需要引入的js文件：jquery-1.4.4.min.js， jquery.ztree.core.js， jquery.ztree.excheck.js。

基本代码（进入页面加载Ztree）:

	$(document).ready(function() {
		reload();
	});
	function reload() {
		var setting = {
			check : {
				enable : true
			},
			data : {
				simpleData : {
					enable : true
				}
			}
		};

		var treeNodes;
		var code;
		function setCheck() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"), py = $("#py").attr(
					"checked") ? "p" : "", sy = $("#sy").attr("checked") ? "s"
					: "", pn = $("#pn").attr("checked") ? "p" : "", sn = $(
					"#sn").attr("checked") ? "s" : "", type = {
				"Y" : py + sy,
				"N" : pn + sn
			};
			zTree.setting.check.chkboxType = type;
			showCode('setting.check.chkboxType = { "Y" : "' + type.Y
					+ '", "N" : "' + type.N + '" };');
		}
		function showCode(str) {
			if (!code)
				code = $("#code");
			code.empty();
			code.append("<li>" + str + "</li>");
		}
		$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			dataType : "json",
			url : '${basePath }/role/list',
			error : function() {
				alert("请求失败");
			},
			success : function(data) {
				treeNodes = data;
				$.fn.zTree.init($("#treeDemo"), setting, treeNodes);
				setCheck();
				$("#py").bind("change", setCheck);
				$("#sy").bind("change", setCheck);
				$("#pn").bind("change", setCheck);
				$("#sn").bind("change", setCheck);
				var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
				treeObj.expandAll(true) //默认展开树枝
				AssignCheck();

			}
		});
	}

进入页面后默认选中：

function AssignCheck() {
		var roleId = <%=request.getAttribute("roleId")%>;
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		$.ajax({
			type:'POST',
			dataType:"json",
			url:'${basePath }/role/check?id='+roleId,
			error:function(){
				alert("请求失败");
			},
				  
			success: function(data){ 
				 for(var o in data){ 
				    treeObj.checkNode(treeObj.getNodeByParam("id", data[o].ID, null), true, true);

				 }
		      } 
		});
		
	}

全选：

    function CheckAllNodes() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.checkAllNodes(true);
    }

全部取消：

function CancelAllNodes() {
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		treeObj.checkAllNodes(false);
	}

获取所有选中节点的id值：

 function checkboxs() {
         var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        checks = zTree.getCheckedNodes(true);

        var ids = "";
        for(var i=0;i<checks.length;i++) {
        	ids += checks[i].id +"," ;
        }
        return ids;
    }

保存权限：

 //保存权限
    function saveConfim() {
		 var msg=checkboxs();
		 var roleId=$("#roleId").val();
		// alert(roleId);
		if (confirm("确认要保存当前设置？")==true){
			/* window.location.href="${basePath}/role/save?roleId="+roleId+"&msg="+msg; */
		 	loading();
			$.ajax( {
				type : "post",
				url : "${basePath}/role/save?roleId="+roleId,
				data : {
					msg : msg,
				},
				error:function(){
					removeLoad();
					alert("保存失败");
				},
				success : function(data) {
					removeLoad();
					if(data==1){
						alert("保存成功");
						window.close();
					}else{
						alert("保存失败");
						window.close();
					}
					
				},
				dataType : "text"
					})
				}
			}

保存载入动画：

        //载入loading动画
	function loading(){
		 var insertText = "<div class=\"bounce1\"></div><div class=\"bounce2\"></div><div class=\"bounce3\"></div>";
		 document.getElementById("spinner").innerHTML = document.getElementById("spinner").innerHTML+insertText; 
	}
	//移除loading动画
	function removeLoad(){
		$("#spinner").remove()
	}

载入动画样式：

<style>
	.spinner {
	  text-align: center;
	}	 
	.spinner > div {
	  width: 15px;
	  height: 15px;
	  background-color:skyblue;
	  border-radius: 100%;
	  display: inline-block;
	  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
	  animation: bouncedelay 1.4s infinite ease-in-out;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	}
	 
	.spinner .bounce1 {
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
	}
	 
	.spinner .bounce2 {
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
	}
	 
	@-webkit-keyframes bouncedelay {
	  0%, 80%, 100% { -webkit-transform: scale(0.0) }
	  40% { -webkit-transform: scale(1.0) }
	}
	 
	@keyframes bouncedelay {
	  0%, 80%, 100% {
	    transform: scale(0.0);
	    -webkit-transform: scale(0.0);
	  } 40% {
	    transform: scale(1.0);
	    -webkit-transform: scale(1.0);
	  }
	}
</style>

大致就是这样，还有很多功能官网的Api写的很详细，也有demo，有时间的话可以深入研究一下，一个不错的js树插件。