Ztree-CheckBox

最新推荐文章于 2019-07-26 09:37:24 发布

Korbin Luo

最新推荐文章于 2019-07-26 09:37:24 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

文章标签： css function resources url 服务器 class

本文链接：https://blog.youkuaiyun.com/geloin/article/details/7448917

本文介绍如何使用zTree插件创建可勾选的菜单树，用于角色权限管理。通过配置检查框和简单数据模式，实现菜单的层级展示及权限分配。

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

假设我们的系统中涉及权限管理，所有用户分为不同的角色，而不同的角色拥有不同菜单的权限，这时，我们可以采用ztree将所有的菜单显示出来，以便在添加或修改角色时选择该角色所拥有的菜单。

如何实现权限管理不是本文的重点，本文重在讲解如何实现菜单树并供角色勾选。

在http://www.baby666.cn/v3/main.php下载ztree后，将解压后的文件夹中的css\zTreeStyle.css、css\zTreeStyle\img\line_conn.gif、css\zTreeStyle\img\zTreeStandard.png、js\jquery.ztree.core-3.1.js、js\jquery.ztree.excheck-3.1.js、js\jquery-1.4.4.min.js引入系统，形成类似如下资源结构：

resources
    css
        zTreeStyle.css
    images
        line_conn.gif
        zTreeStandard.png
    js
        jquery.ztree.core-3.1.js
        jquery.ztree.excheck-3.1.js
        jquery-1.4.4.min.js

此时的zTreeStyle.css文件需要进行相应更改，即对line_conn.gif和zTreeStandard.png的位置进行变更，具体变更不进行赘述。

做好以上准备工作后，在你的jsp页面（或者其他格式页面，如html、php等）进行如下操作：

(1) 引入相关资源，如下列代码所示：

<link rel="stylesheet"
	href="<c:url value="/resources/css/zTreeStyle.css" />" type="text/css" />
<script type="text/javascript"
	src="<c:url value="/resources/js/jquery-1.4.4.min.js" />"></script>
<script type="text/javascript"
	src="<c:url value="/resources/js/jquery.ztree.core-3.1.js" />"></script>
<script type="text/javascript"
	src="<c:url value="/resources/js/jquery.ztree.excheck-3.1.js" />"></script>

(2) 写入ztree代码，如下列代码所示：

<script type="text/javascript">
<!--
	var setting = {
		check : {
			enable : true
		},
		data : {
			simpleData : {
				enable : true
			}
		}
	};

	var zNodes = [ <c:out value="${treeJs}" escapeXml="false" /> ];

	$(document).ready(function() {
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	});

	function toSubmit() {
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = treeObj.getCheckedNodes(true);
		var ids = ",";
		for (var i = 0; i < nodes.length; i++) {
			ids += nodes[i].id + ",";
		}
		if (ids == ',') {
			ids = "";
		}
		document.getElementById('menuIds').value = ids;
		return true;
	}
//-->
</script>

其中，zNodes的值由服务器传递到页面，格式如下所示：

			{ id:1, pId:0, name:"随意勾选 1", open:true},
			{ id:11, pId:1, name:"随意勾选 1-1", open:true},
			{ id:111, pId:11, name:"随意勾选 1-1-1"},
			{ id:112, pId:11, name:"随意勾选 1-1-2"},
			{ id:12, pId:1, name:"随意勾选 1-2", open:true},
			{ id:121, pId:12, name:"随意勾选 1-2-1"},
			{ id:122, pId:12, name:"随意勾选 1-2-2"},
			{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
			{ id:21, pId:2, name:"随意勾选 2-1"},
			{ id:22, pId:2, name:"随意勾选 2-2", open:true},
			{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
			{ id:222, pId:22, name:"随意勾选 2-2-2"},
			{ id:23, pId:2, name:"随意勾选 2-3"}

toSubmit方法是自定义的方法，功能为获取所有被选中项的id，并组合成类似“，1，2，3，4，”格式的数据。

(3) 在body中添加代码显示树，如下所示：

<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>

这样便完成了一个带有checkbox的菜单树，在勾选菜单后，通过toSubmit将已勾选的项的ID集合传递到服务器端进行处理。