您的位置: 首页  >  文章  >  Ztree的权限控制详解

Ztree的权限控制详解

分类: 文章 • 2024-12-05 18:10:16

第一步(ztree文件引入)

<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
 <!-- 导入ztree类库 -->
<link rel="stylesheet" href="./js/ztree/zTreeStyle.css" type="text/css" />
<script src="./js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>

 

第二步(script代码)


<script type="text/javascript">
	// 初始化ztree菜单
	$(function() {
		var setting = {
			data : {
				simpleData : { // 简单数据 
					enable : true
				}
			},
			callback : {
				onClick : onClick
			}
		};
		
		// 基本功能菜单加载
		$.ajax({
			url : '${pageContext.request.contextPath}/json/menu.json',
			type : 'POST',
			dataType : 'text',
			success : function(data) {
				var zNodes = eval("(" + data + ")");
				$.fn.zTree.init($("#treeMenu"), setting, zNodes);
			},
			error : function(msg) {
				alert('菜单加载异常!');
			}
		});
	

	function onClick(event, treeId, treeNode, clickFlag) {
		// 判断树菜单节点是否含有 page属性
		if (treeNode.page!=undefined && treeNode.page!= "") {
			var content = '<div style="width:100%;height:100%;overflow:hidden;">'
					+ '<iframe src="'
					+ treeNode.page
					+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
			if ($("#tabs").tabs('exists', treeNode.name)) {// 判断tab是否存在
				$('#tabs').tabs('select', treeNode.name); // 切换tab
				var tab = $('#tabs').tabs('getSelected'); 
				$('#tabs').tabs('update', {
				    tab: tab,
				    options: {
				        title: treeNode.name,
				        content: content
				    }
				});
			} else {
				// 开启一个新的tab页面
				$('#tabs').tabs('add', {
					title : treeNode.name,
					content : content,
					closable : true
				});
			}
		}
	  }
	});
	
</script>

 

第三步(body使用)

<body>
          	<div class="left-bottom">
<!-- 				************ztree***************** -->
						<ul id="treeMenu" class="ztree"></ul>
				</div>
</body>

 

第四步、数据初始化文件

Menu.json  编码为utf-8否则会乱码

[
		{ "id":"11", "pId":"0", "name":"基础数据"},
		{ "id":"112", "pId":"11", "name":"取派员设置",  "page":"page_base_staff.action"},
		{ "id":"113", "pId":"11", "name":"区域设置","page":"page_base_region.action"},
		{ "id":"114", "pId":"11", "name":"管理分区", "page":"page_base_subarea.action"},
		{ "id":"115", "pId":"11", "name":"管理定区/调度排班","page":"page_base_decidedzone.action"},
		{ "id":"12", "pId":"0", "name":"受理"},
		{ "id":"121", "pId":"12", "name":"业务受理" ,"page":"page_qupai_noticebill_add.action"},
		{ "id":"122", "pId":"12", "name":"工作单快速录入" ,"page":"page_qupai_quickworkorder.action"},
		{ "id":"124", "pId":"12", "name":"工作单导入" ,"page":"page_qupai_workorderimport.action"},
		{ "id":"13", "pId":"0", "name":"调度"},
		{ "id":"131", "pId":"13", "name":"查台转单","page":""},
		{ "id":"132", "pId":"13", "name":"人工调度","page":"page_qupai_diaodu.action"}
]

Ztree的权限控制详解Ztree的权限控制详解

 

相关推荐