FastQ思考系列之EasyUI页面按钮权限控制

最新推荐文章于 2024-05-17 06:28:25 发布

原创最新推荐文章于 2024-05-17 06:28:25 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

解决方案专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用EasyUI框架实现按钮级权限控制的方法。通过在前端动态加载按钮并结合后端返回的角色权限信息，实现了根据不同角色展示不同操作按钮的功能。

将权限粒度细化至按钮,实现拥有权限时，显示按钮，否则不显示
- 页面代码

 1 <script type="text/javascript">
 2     $(function() {
 3         $('#admin_yhgl_datagrid').datagrid({
 4             url : '${pageContext.request.contextPath}/userAction!datagrid.action',
 5             fit : true,
 6             fitColumns : true,
 7             border : false,
 8             pagination : true,
 9             idField : 'id',
10             pageSize : 10,
11             pageList : [ 10, 20, 30, 40, 50 ],
12             sortName : 'name',
13             sortOrder : 'asc',
14             /*pagePosition : 'both',*/
15             checkOnSelect : false,
16             selectOnCheck : false,
17             frozenColumns : [ [ {
18                 field : 'id',
19                 title : '编号',
20                 width : 150,
21                 checkbox : true
22             }, {
23                 field : 'name',
24                 title : '登录名称',
25                 width : 150,
26                 sortable : true
27             } ] ],
28             columns : [ [ {
29                 field : 'pwd',
30                 title : '密码',
31                 width : 150,
32                 formatter : function(value, row, index) {
33                     return '******';
34                 }
35             }, {
36                 field : 'createdatetime',
37                 title : '创建时间',
38                 width : 150,
39                 sortable : true
40             }, {
41                 field : 'modifydatetime',
42                 title : '最后修改时间',
43                 width : 150,
44                 sortable : true
45             } ] ],
46             toolbar : [ {
47                 id:'1',
48                 text : '增加',
49                 iconCls : 'icon-add',
50                 handler : function() {
51                     append();
52                 }
53             }, '-', {
54                 id:'2',
55                 text : '删除',
56                 iconCls : 'icon-remove',
57                 handler : function() {
58                     remove();
59                 }
60             }, '-', {
61                 id:'3',
62                 text : '修改',
63                 iconCls : 'icon-edit',
64                 handler : function() {
65                 }
66             }, '-' ]
67         });
68     });
69     //权限控制
70     $('#admin_yhgl_datagrid').datagrid("initMenuRole");
71 </script>
<table id="admin_yhgl_datagrid"></table

- 扩展easyui JS

  1 $
  2         .extend(
  3                 $.fn.datagrid.methods,
  4                 {
  5                     addToolbarItem : function(jq, items) {
  6                         return jq
  7                                 .each(function() {
  8                                     var toolbar = $(this).parent().prev(
  9                                             "div.datagrid-toolbar");
 10                                     for ( var i = 0; i < items.length; i++) {
 11                                         var item = items[i];
 12                                         if (item === "-") {
 13                                             toolbar
 14                                                     .append('<div class="datagrid-btn-separator"></div>');
 15                                         } else {
 16                                             var btn = $("<a href=\"javascript:void(0)\"></a>");
 17                                             btn[0].onclick = eval(item.handler
 18                                                     || function() {
 19                                                     });
 20                                             btn.css("float", "left").appendTo(
 21                                                     toolbar).linkbutton(
 22                                                     $.extend({}, item, {
 23                                                         plain : true
 24                                                     }));
 25                                         }
 26                                     }
 27                                     toolbar = null;
 28                                 });
 29                     },
 30                     removeToolbarItem : function(jq, param) {
 31                         return jq
 32                                 .each(function() {
 33                                     var btns = $(this).parent().prev(
 34                                             "div.datagrid-toolbar").children(
 35                                             "a");
 36                                     var cbtn = null;
 37                                     if (typeof param == "number") {
 38                                         cbtn = btns.eq(param);
 39                                     } else if (typeof param == "string") {
 40                                         var text = null;
 41                                         btns
 42                                                 .each(function() {
 43                                                     text = $(this).data().linkbutton.options.text;
 44                                                     if (text == param) {
 45                                                         cbtn = $(this);
 46                                                         text = null;
 47                                                         return;
 48                                                     }
 49                                                 });
 50                                     }
 51                                     if (cbtn) {
 52                                         var prev = cbtn.prev()[0];
 53                                         var next = cbtn.next()[0];
 54                                         if (prev
 55                                                 && next
 56                                                 && prev.nodeName == "DIV"
 57                                                 && prev.nodeName == next.nodeName) {
 58                                             $(prev).remove();
 59                                         } else if (next
 60                                                 && next.nodeName == "DIV") {
 61                                             $(next).remove();
 62                                         } else if (prev
 63                                                 && prev.nodeName == "DIV") {
 64                                             $(prev).remove();
 65                                         }
 66                                         cbtn.remove();
 67                                         cbtn = null;
 68                                     }
 69                                 });
 70                     },
 71                     
 72                     //权限控制
 73                     initMenuRole : function(jq) {
 74                         //遍历jq对象
 75                         return jq.each(function() {        
 76                             //获取所有的btn对象
 77                             var btns = $(this).parent().prev("div.datagrid-toolbar").children("a");
 78                             var cbtn = null;
 79                             //Ajax动态从后台获取角色拥有的功能集，后期从session中读取
 80                             var menuroleids="2,3";
 81                             var id = null;
 82                             //依次判断该控件是否满足权限
 83                             btns.each(function() {    
 84                                 cbtn=null;
 85                                 //获取btnid
 86                                 id = $(this).data().linkbutton.options.id;
 87                                 if (menuroleids.indexOf(id)==-1) {
 88                                     //没权限
 89                                     cbtn = $(this);
 90                                 }
 91                                 //移除没权限按钮
 92                                 if (cbtn) {
 93                                     var prev = cbtn.prev()[0];
 94                                     var next = cbtn.next()[0];
 95                                     if (prev && next && prev.nodeName == "DIV"
 96                                             && prev.nodeName == next.nodeName) {
 97                                         $(prev).remove();
 98                                     } else if (next && next.nodeName == "DIV") {
 99                                         $(next).remove();
100                                     } else if (prev && prev.nodeName == "DIV") {
101                                         $(prev).remove();
102                                     }
103                                     cbtn.remove();
104                                 }
105                             });        
106                         });
107                     }
108                 });