zTree使用记录

最新推荐文章于 2022-03-30 15:38:40 发布

azoryzp

最新推荐文章于 2022-03-30 15:38:40 发布

阅读量194

点赞数

分类专栏：前端插件使用文章标签： html javascript

本文链接：https://blog.csdn.net/qq_40053398/article/details/108852708

版权

前端插件使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

版本：zTree v3
官网：http://www.treejs.cn/v3/main.php#_zTreeInfo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../../dist/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../dist/layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="../../plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="../../js/jquery-1.11.3.min.js"></script>
<script src="../../dist/layuiadmin/layui/layui.js"></script>
<script src="../../js/common.js"></script>

<script type="text/javascript" src="../../plugins/zTree_v3/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="../../plugins/zTree_v3/js/jquery.ztree.excheck.min.js"></script>

<style type="text/css">
	.ztree li a:hover {
		text-decoration: none;
	}
</style>
</head>
<body>
	<div class="layui-fluid">
		<div>
			<button id="confirm" type="button" class="layui-btn layui-btn-sm">确定</button>
			<button id="expandAllBtn" type="button" class="layui-btn layui-btn-sm layui-btn-normal" >全部展开</button>
			<button id="collapseAllBtn" type="button" class="layui-btn layui-btn-sm" style="background: #EF4B4C">全部收起</button>
			<button id="expandSonBtn" type="button" class="layui-btn layui-btn-sm" style="background: #3E80C1">展开当前</button>
			<button id="collapseSonBtn" type="button" class="layui-btn layui-btn-sm" style="background: #FF6D00">收起当前</button>
		</div>
		<div class="layui-tab layui-tab-brief" lay-filter="permissionTab">
			<ul class="layui-tab-title">
				<li class="layui-this" lay-id="page">页面权限</li>
				<li lay-id="rf">RF权限</li>
			</ul>
			<div class="layui-tab-content" style="height: 355px;overflow-y: auto;">
				<div id="pagePermission" class="layui-tab-item layui-show">
					<ul id="pageTree" class="ztree"></ul>
				</div>
				<div id="rfPermission" class="layui-tab-item">
					<ul id="rfTree" class="ztree"></ul>
				</div>
			</div>
		</div>
	</div>
<script>
var pageId;
var rowData;
var roleId;

var permissions;
var tabIndex = 0;
$(function(){
	pageId = getUrlParam('pageId');
	var storage=window.localStorage;
	rowData = $.parseJSON(storage[pageId + "_rowData"]);
	roleId = rowData['role.id'];
	permissions = loadPermissionData(roleId);
});

layui.config({
    base: '../../dist/layuiadmin/' //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
}).use(['index', 'element'], function() {
	  var element = layui.element;
	  var $ = layui.$;
	  element.on('tab(permissionTab)', function(data){
		  tabIndex = data.index;//得到当前Tab的所在下标
      });
	  
	  for(var i=0;i< permissions.pagePermissions.length;i++) {
			permissions.pagePermissions[i].icon = permissions.pagePermissions[i].isButton? "../../image/brick.gif": "../../image/application_side_list.gif"
	  }
	  for(var i=0;i< permissions.rfPermissions.length;i++) {
			permissions.rfPermissions[i].icon = "../../image/application_side_list.gif"
	  }
	  initTree("pageTree", permissions.pagePermissions);
	  initTree("rfTree", permissions.rfPermissions);
});

function initTree(id, data) {
	var setting = {
			check: {
				enable: true,
				nocheckInherit: true,
				chkboxType:  { "Y" : "ps", "N" : "s" }
			},
			data: {
				simpleData: {
					enable: true,
					idKey:"id",
		            pidKey:"pId",
		            rootId:"null"
				}
			}
		};
	$.fn.zTree.init($("#"+id), setting, data);
	$("#expandSonBtn").bind("click", {type:"expandSon"}, expandNode);
	$("#collapseSonBtn").bind("click", {type:"collapseSon"}, expandNode);
	$("#expandAllBtn").bind("click", {type:"expandAll"}, expandNode);
	$("#collapseAllBtn").bind("click", {type:"collapseAll"}, expandNode);
}

// 加载页面权限数据
function loadPermissionData(roleId) {
	var result = [];
	$.ajax({
		  async: false,
		  type: "POST",
	      url: '../../permission/loadRolePermissionData.do',
	      dataType: 'json',
	      data:{
	    	  'roleId': roleId
	      },
	      success: function (res) {
	    	if (res.flag) {
	    		result = res.data;  
            } else {
                dealRpcFail(res);
            }
	      }
	});
	return result;
}

function expandNode(e) {
	var zTree;
	if(tabIndex == 0) {
		zTree = $.fn.zTree.getZTreeObj("pageTree")
	} else if(tabIndex == 1) {
		zTree = $.fn.zTree.getZTreeObj("rfTree")
	}
	type = e.data.type,
	nodes = zTree.getSelectedNodes();
	if (type.indexOf("All")<0 && nodes.length == 0) {
		layer.msg("请先选择一个节点", {
            icon: 6
        });
	}

	if (type == "expandAll") {
		zTree.expandAll(true);
	} else if (type == "collapseAll") {
		zTree.expandAll(false);
	} else {
		var callbackFlag = $("#callbackTrigger").attr("checked");
		for (var i=0, l=nodes.length; i<l; i++) {
			zTree.setting.view.fontCss = {};
			if (type == "expand") {
				zTree.expandNode(nodes[i], true, null, null, callbackFlag);
			} else if (type == "collapse") {
				zTree.expandNode(nodes[i], false, null, null, callbackFlag);
			} else if (type == "toggle") {
				zTree.expandNode(nodes[i], null, null, null, callbackFlag);
			} else if (type == "expandSon") {
				zTree.expandNode(nodes[i], true, true, null, callbackFlag);
			} else if (type == "collapseSon") {
				zTree.expandNode(nodes[i], false, true, null, callbackFlag);
			}
		}
	}
}

$("#confirm").on("click", function() {
	var zTree = $.fn.zTree.getZTreeObj("pageTree");
// 	if(tabIndex == 0) {
// // 		zTree = $.fn.zTree.getZTreeObj("pageTree")
// 	}/*  else if(tabIndex == 1) {
// 		zTree = $.fn.zTree.getZTreeObj("rfTree")
// 	} */
	var nodes = zTree.getCheckedNodes(true);  // 获取所有勾选的节点，设置为false为所有未勾选的节点
	var permissionIds = [];
	  for(var i = 0;i < nodes.length; i++) {
		  permissionIds.push(nodes[i].id);
	  }
// 	  for(var i = 0;i < nodes.length; i++) {
// 		  permissionIds.push(rfPermissionParams[i]['nodeId']);
// 	  }
	  //提交数据
	  $.ajax({
		  async: false,
		  type: "POST",
	      url: '../../permission/updatePermissions.do',
	      dataType: 'json',
	      data:{
	    	  'roleId': roleId,
	    	  'permissionIds': permissionIds.join(",")
	      },
	      success: function (res) {
	    	if (res.flag) {
	    		layer.msg(res.message, {
                  offset: '115px',
                  icon: 1,
                  time: 1000
                });
          } else {
        	  dealRpcFail(res);
	      }
	   }
	});
});
</script>
</body>
</html>