国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
shiro安全框架擴(kuò)展教程--角色樹控制展示(ztree框架)

        對(duì)于系統(tǒng)來說,一個(gè)好的角色架構(gòu)是灰常重要的,但是頁面該怎么展示,以及修改配置權(quán)限更方便呢?我個(gè)人覺得應(yīng)該是使用樹形結(jié)構(gòu)來展示我們的角色層疊更貼切,

所以我花了一天的時(shí)候研究了下jquery的ztree是怎么樣玩的(哈哈,因?yàn)閭€(gè)人比較愚鈍,所以花的時(shí)間有點(diǎn)多)


下面先上點(diǎn)效果圖



這樣的做法基本可以管理簡(jiǎn)單的樹形模式,下面我來帖些代碼


  1. <!DOCTYPE html>  
  2. <HTML>  
  3. <HEAD>  
  4.     <TITLE>角色控制面板</TITLE>  
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  6.     <style type="text/css">  
  7.         .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}  
  8.     </style>  
  9.     <link rel="stylesheet" href="/static/plugin/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">  
  10.     <script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery-1.4.4.min.js"></script>  
  11.     <script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery.ztree.core-3.5.js"></script>  
  12.     <script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>  
  13.     <script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>  
  14.     <SCRIPT type="text/javascript">  
  15.         var setting = {  
  16.             view: {  
  17.                 addHoverDom: addHoverDom,  
  18.                 removeHoverDom: removeHoverDom,  
  19.                 selectedMulti: false,  
  20.                 showIcon: true  
  21.             },  
  22.             edit: {  
  23.                 enable: true,  
  24.                 editNameSelectAll: true,  
  25.                 showRemoveBtn: showRemoveBtn,  
  26.                 showRenameBtn: true  
  27.             },  
  28.             data: {  
  29.                 simpleData: {  
  30.                     enable: true  
  31.                 }  
  32.             },  
  33.             callback: {  
  34.                 beforeDrag: beforeDrag,  
  35.                 beforeEditName: beforeEditName,  
  36.                 beforeRemove: beforeRemove,  
  37.                 beforeRename: beforeRename,  
  38.                 onRemove: onRemove  
  39.             }  
  40.         };  
  41.   
  42.         function beforeDrag(treeId, treeNodes) {  
  43.             return false;  
  44.         }  
  45.           
  46.         function beforeEditName(treeId, treeNode) {  
  47.             var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
  48.             zTree.selectNode(treeNode);  
  49.             if(confirm("是否進(jìn)入簡(jiǎn)單編輯狀態(tài)?")){  
  50.                 return true;  
  51.             }else{  
  52.                 $("#formRoleId").val(treeNode.id);  
  53.                 $("#formRoleRsv").val(treeNode.rsv_);  
  54.                 $("#formRoleName").val(treeNode.name);  
  55.                 $("#formRoleContent").val(treeNode.content);  
  56.             }  
  57.             return false;  
  58.         }  
  59.           
  60.         function beforeRemove(treeId, treeNode) {  
  61.             var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
  62.             zTree.selectNode(treeNode);  
  63.             return confirm("確認(rèn)刪除 [" + treeNode.name + "]?");  
  64.         }  
  65.           
  66.         function onRemove(e, treeId, treeNode) {  
  67.             $.post('/cms/authority/removeById.do', 'id='+treeNode.id+'&rsv_='+treeNode.rsv_, function(result){  
  68.                 var json = toJson(result);  
  69.                 if(!json.success){  
  70.                     alert(json.message);  
  71.                 }  
  72.             });  
  73.         }  
  74.           
  75.         function beforeRename(treeId, treeNode, newName, isCancel) {  
  76.             if (newName.length == 0) {  
  77.                 alert("內(nèi)容不能為空.");  
  78.                 var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
  79.                 setTimeout(function(){zTree.editName(treeNode)}, 10);  
  80.                 return false;  
  81.             }  
  82.             if(treeNode.name == newName){  
  83.                 return true;  
  84.             }  
  85.             $.post('/cms/authority/modify.do', 'id='+treeNode.id+'&rsv_='+treeNode.rsv_+'&name='+newName, function(result){  
  86.                 var json = toJson(result);  
  87.                 if(!json.success){  
  88.                     alert(json.message);  
  89.                     return false;  
  90.                 }  
  91.             });  
  92.             return true;  
  93.         }  
  94.           
  95.         function showRemoveBtn(treeId, treeNode) {  
  96.             return !treeNode.isParent;  
  97.         }  
  98.           
  99.         function addHoverDom(treeId, treeNode) {  
  100.             var sObj = $("#" + treeNode.tId + "_span");  
  101.             if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;  
  102.             var addStr = "<span class='button add' id='addBtn_" + treeNode.tId  
  103.                 + "' title='add' onfocus='this.blur();'></span>";  
  104.             sObj.after(addStr);  
  105.             var btn = $("#addBtn_"+treeNode.tId);  
  106.             if (btn) btn.bind("click", function(){  
  107.                 var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
  108.                 var f = confirm("確定要添加新角色?");  
  109.                 if(!f){  
  110.                     return false;  
  111.                 }  
  112.                 $.post('/cms/authority/save.do', 'parent.id='+treeNode.id+'&name=新角色', function(result){  
  113.                     var json = toJson(result);  
  114.                     if(json.success){  
  115.                         zTree.addNodes(treeNode, toJson(json.value));  
  116.                     }else{  
  117.                         alert(json.message);  
  118.                     }  
  119.                 });  
  120.                 return false;  
  121.             });  
  122.         };  
  123.           
  124.         function removeHoverDom(treeId, treeNode) {  
  125.             $("#addBtn_"+treeNode.tId).unbind().remove();  
  126.         };  
  127.   
  128.         function toJson(obj){  
  129.             try{  
  130.                 return eval('('+obj+')');  
  131.             }catch(e){  
  132.                 return [{success:false,message:'請(qǐng)求返回?cái)?shù)據(jù)異常!'}];  
  133.             }  
  134.         }  
  135.           
  136.         $(document).ready(function(){  
  137.             $.post('/cms/authority/find4tree.do', '', function(result){  
  138.                 $.fn.zTree.init($("#treeDemo"), setting, toJson(result));  
  139.             });  
  140.         });  
  141.   
  142.         function submitForm(){  
  143.             $.post('/cms/authority/modify.do', $('#submitForm').serialize(), function(result){  
  144.                 var json = toJson(result);  
  145.                 if(json.success){  
  146.                     var zTree = $.fn.zTree.getZTreeObj('treeDemo');  
  147.                     var newNode = zTree.getNodeByParam("id", $('#formRoleId').val());  
  148.                     newNode.name = $('#formRoleName').val();  
  149.                     newNode.content = $('#formRoleContent').val();  
  150.                     zTree.updateNode(newNode);  
  151.                     resetForm();  
  152.                 }  
  153.                 alert(json.message);  
  154.             });  
  155.         }  
  156.   
  157.         function resetForm(){  
  158.             $("#formRoleId").val('');  
  159.             $("#formRoleRsv").val('');  
  160.             $("#formRoleName").val('');  
  161.             $("#formRoleContent").val('');  
  162.         }  
  163.           
  164.     </SCRIPT>  
  165. </HEAD>  
  166.   
  167. <BODY>  
  168. <h2>角色控制面板</h2>  
  169. <div>  
  170.     <ul id="treeDemo" class="ztree"></ul>  
  171. </div>  
  172. <hr />  
  173. <div>  
  174.     <h3>修改明細(xì)</h3>  
  175.     <form action="#" id="submitForm" method="post">  
  176.     <input type="hidden" name="id" id="formRoleId" />  
  177.     <input type="hidden" id="formRolePId" />  
  178.     <input type="hidden" name="rsv_" id="formRoleRsv" />  
  179.     角色名稱: <input type="text" name="name" id="formRoleName" /><br />  
  180.     角色內(nèi)容: <input type="text" name="content" id="formRoleContent" /><br />  
  181.     <input type="button" value="submit" onclick="submitForm();" /> <input type="button" value="reset" onclick="resetForm();" />  
  182.     </form>  
  183. </div>  
  184. </BODY>  
  185. </HTML>  

幸好ztree的api還是比較不錯(cuò)的,用起來挺順手,除了add節(jié)點(diǎn)那個(gè)事件比較別扭,其他的還算可以,基本看了我上面代碼應(yīng)用的事件,基本的功能點(diǎn)都覆蓋到了,一般的項(xiàng)目也就是用到哪幾個(gè)功能而已,其他訂制的需要自己研究,基本的新增修改流程就是addNodes,updateNode方法
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
zTree使用總結(jié)
Jquery
jquery ztree實(shí)現(xiàn)下拉樹形框使用到了json數(shù)據(jù)
Ztree創(chuàng)建帶有復(fù)選框的樹
asp.net 中點(diǎn)擊按鈕彈出模式對(duì)話框，選擇值后返回到頁面中(window.showModalDialog實(shí)現(xiàn))
ExtJs樹控件制作
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服