shiro安全框架扩展教程--角色树控制展示(ztree框架)

最新推荐文章于 2021-02-16 03:35:57 发布

iteye_11495

最新推荐文章于 2021-02-16 03:35:57 发布

阅读量240

点赞数

文章标签： json javascript ViewUI

对于系统来说,一个好的角色架构是灰常重要的,但是页面该怎么展示,以及修改配置权限更方便呢?我个人觉得应该是使用树形结构来展示我们的角色层叠更贴切,

所以我花了一天的时候研究了下jquery的ztree是怎么样玩的(哈哈,因为个人比较愚钝,所以花的时间有点多)

下面先上点效果图

这样的做法基本可以管理简单的树形模式,下面我来帖些代码

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE>角色控制面板</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<style type="text/css">
		.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	</style>
	<link rel="stylesheet" href="/static/plugin/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
	<SCRIPT type="text/javascript">
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false,
				showIcon: true
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: showRemoveBtn,
				showRenameBtn: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove
			}
		};

		function beforeDrag(treeId, treeNodes) {
			return false;
		}
		
		function beforeEditName(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			if(confirm("是否进入简单编辑状态?")){
				return true;
			}else{
				$("#formRoleId").val(treeNode.id);
				$("#formRoleRsv").val(treeNode.rsv_);
				$("#formRoleName").val(treeNode.name);
				$("#formRoleContent").val(treeNode.content);
			}
			return false;
		}
		
		function beforeRemove(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除 [" + treeNode.name + "]?");
		}
		
		function onRemove(e, treeId, treeNode) {
			$.post('/cms/authority/removeById.do', 'id='+treeNode.id+'&rsv_='+treeNode.rsv_, function(result){
				var json = toJson(result);
				if(!json.success){
					alert(json.message);
				}
			});
		}
		
		function beforeRename(treeId, treeNode, newName, isCancel) {
			if (newName.length == 0) {
				alert("内容不能为空.");
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				setTimeout(function(){zTree.editName(treeNode)}, 10);
				return false;
			}
			if(treeNode.name == newName){
				return true;
			}
			$.post('/cms/authority/modify.do', 'id='+treeNode.id+'&rsv_='+treeNode.rsv_+'&name='+newName, function(result){
				var json = toJson(result);
				if(!json.success){
					alert(json.message);
					return false;
				}
			});
			return true;
		}
		
		function showRemoveBtn(treeId, treeNode) {
			return !treeNode.isParent;
		}
		
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='add' οnfοcus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				var f = confirm("确定要添加新角色?");
				if(!f){
					return false;
				}
				$.post('/cms/authority/save.do', 'parent.id='+treeNode.id+'&name=新角色', function(result){
					var json = toJson(result);
					if(json.success){
						zTree.addNodes(treeNode, toJson(json.value));
					}else{
						alert(json.message);
					}
				});
				return false;
			});
		};
		
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};

		function toJson(obj){
			try{
				return eval('('+obj+')');
			}catch(e){
				return [{success:false,message:'请求返回数据异常!'}];
			}
		}
		
		$(document).ready(function(){
			$.post('/cms/authority/find4tree.do', '', function(result){
				$.fn.zTree.init($("#treeDemo"), setting, toJson(result));
			});
		});

		function submitForm(){
			$.post('/cms/authority/modify.do', $('#submitForm').serialize(), function(result){
				var json = toJson(result);
				if(json.success){
					var zTree = $.fn.zTree.getZTreeObj('treeDemo');
					var newNode = zTree.getNodeByParam("id", $('#formRoleId').val());
					newNode.name = $('#formRoleName').val();
					newNode.content = $('#formRoleContent').val();
					zTree.updateNode(newNode);
					resetForm();
				}
				alert(json.message);
			});
		}

		function resetForm(){
			$("#formRoleId").val('');
			$("#formRoleRsv").val('');
			$("#formRoleName").val('');
			$("#formRoleContent").val('');
		}
		
	</SCRIPT>
</HEAD>

<BODY>
<h2>角色控制面板</h2>
<div>
	<ul id="treeDemo" class="ztree"></ul>
</div>
<hr />
<div>
	<h3>修改明细</h3>
	<form action="#" id="submitForm" method="post">
	<input type="hidden" name="id" id="formRoleId" />
	<input type="hidden" id="formRolePId" />
	<input type="hidden" name="rsv_" id="formRoleRsv" />
	角色名称: <input type="text" name="name" id="formRoleName" /><br />
	角色内容: <input type="text" name="content" id="formRoleContent" /><br />
	<input type="button" value="submit" οnclick="submitForm();" /><input type="button" value="reset" οnclick="resetForm();" />
	</form>
</div>
</BODY>
</HTML>

幸好ztree的api还是比较不错的,用起来挺顺手,除了add节点那个事件比较别扭,其他的还算可以,基本看了我上面代码应用的事件,基本的功能点都覆盖到了,一般的项目也就是用到哪几个功能而已,其他订制的需要自己研究,基本的新增修改流程就是addNodes,updateNode方法

iteye_11495

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
shiro安全框架扩展教程--角色树控制展示(ztree框架)

对于系统来说,一个好的角色架构是灰常重要的,但是页面该怎么展示,以及修改配置权限更方便呢?我个人觉得应该是使用树形结构来展示我们的角色层叠更贴切,所以我花了一天的时候研究了下jquery的ztree是怎么样玩的(哈哈,因为个人比较愚钝,所以花的时间有点多)下面先上点效果图这样的做法基本可以管理简单的树形模式,下面我来帖些代码&lt;!DOCTYPE html...
复制链接

扫一扫