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

来源：互联网发布：ubuntu安装桌面教程编辑：程序博客网时间：2024/05/24 06:31

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

所以我花了一天的时候研究了下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' onfocus='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" onclick="submitForm();" /> <input type="button" value="reset" onclick="resetForm();" /></form></div></BODY></HTML>

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

1 0