UPMS权限设计客户端和服务器端

权限管理系统的设计几乎在每个应用里面都会涉及到,如何在应用中自定义权限,需要客户端界面和服务器端。在这里我开发了一个通用权限管理系统,可以集成到任何一个应用中,所有的代码在百度云盘分享,分享地址如下:http://pan.baidu.com/s/1hszGxV2,如何使用给出了一个工程实例:UPMS权限设计.rar,下面贴出客户端代码,如果对此有兴趣,可以加我qq讨论,本人qq:412383550

页面代码如下:upms.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <link rel="stylesheet" type="text/css"
 7     href="easyui/ui-cupertino/easyui.css">
 8 <link rel="stylesheet" type="text/css"
 9     href="easyui/icon.css">
10 <link rel="stylesheet" type="text/css"
11     href="easyui/color.css">
12 <link rel="stylesheet" type="text/css"
13     href="easyui/demo.css">
14 <script type="text/javascript"
15     src="easyui/jquery.min.js"></script>
16 <script type="text/javascript"
17     src="easyui/jquery.easyui.min.js"></script>
18     <script type="text/javascript" src="easyui/easyui-lang-zh_CN.js"></script>
19 <script type="text/javascript"
20     src="Util.js"></script>
21 </head>
22 <body>
23     <div id="upms"></div>
24     <script type="text/javascript" src="upms.js"></script>
25     <script type="text/javascript">
26         UPMS.init($("#upms"));
27     </script>
28 </body>
29 </html>

upms.js如下

  1 /**
  2  * 
  3  */
  4 "use strict";
  5 // 单例
  6 var UPMS = {};
  7 (function() {
  8     // 初始化方法
  9     // jquery是一个Layout
 10     UPMS.init = function(jquery) {
 11         // 北区,工具栏
 12         // 创建menu
 13         var region = $("<div  style='padding:5px 5px;'></div>")
 14                 .appendTo(jquery)
 15                 .attr("data-options", "region:'north'")
 16                 .height(40)
 17                 .append(
 18                         $("<div id='upms-mm' style='width:150px'>")
 19                                 .append("<div>追加用户</div>")
 20                                 .append("<div>追加角色</div>")
 21                                 .append("<div>追加组</div>")
 22                                 .append("<div class='menu-sep'>")
 23                                 .append(
 24                                         $("<div></div>")
 25                                                 .append("<span>追加引用</span>")
 26                                                 .append(
 27                                                         $("<div></div>")
 28                                                                 .append(
 29                                                                         "<div>用户引用</div>")
 30                                                                 .append(
 31                                                                         "<div>角色引用</div>"))))
 32                 .append(this.addButton = $("<a href='#'>追加</a>").menubutton({
 33                     iconCls : 'icon-add',
 34                     menu : '#upms-mm'
 35                 })).append($("<a href='#'>删除</a>").linkbutton({
 36                     iconCls : 'icon-remove',
 37                     onClick : function(e) {
 38                         UPMS.onRemove();
 39                     }
 40                 })).append($("<a href='#'>清空</a>").linkbutton({
 41                     iconCls : 'icon-cancel',
 42                     onClick : function(e) {
 43                         UPMS.onCancel();
 44                     }
 45                 })).append($("<a href='#'>保存</a>").linkbutton({
 46                     iconCls : 'icon-save',
 47                     onClick : function(e) {
 48                         UPMS.onSave();
 49                     }
 50                 })).append($("<a href='#'>清除选中状态</a>").linkbutton({
 51                     iconCls : 'icon-clear',
 52                     onClick : function(e) {
 53                         UPMS.onClear();
 54                     }
 55                 }));
 56         // 覆盖菜单点击事件
 57         $('#upms-mm').menu({
 58             onClick : function(item) {
 59                 UPMS.onAppend(item.text);
 60             }
 61         });
 62         // 西区,工作区
 63         region = $('<div></div>').appendTo(jquery);
 64         // 布局
 65         region.attr("data-options", "region:'west',split:true").css({
 66             "width" : "40%",
 67             "padding" : "10px"
 68         });
 69         // 追加树
 70         this.tree = $("<ul></ul>").appendTo(region).tree({
 71             lines : true,
 72             animate : true,
 73             data : [ {
 74                 "id" : "0",
 75                 "text" : "权限管理",
 76                 "children" : [ new Users(), new Roles(), new Groups() ]
 77             } ],
 78             onSelect : function(node) {
 79                 // 获取选中的节点
 80                 var node = $(this).tree('getSelected');
 81                 if (node) {
 82                     UPMS.onSelect(node);
 83                 }
 84             }
 85         });
 86         // 中区,属性视图
 87         region = $('<div></div>').appendTo(jquery);
 88         // 布局
 89         region.attr("data-options", "region:'center',split:true").css({
 90             "padding" : "10px"
 91         });
 92         // 包装layout
 93         jquery.layout({
 94             fit : true
 95         }).resize();
 96         // 追加属性视图
 97         this.propertygrid = $('<table></table>').appendTo(region).propertygrid(
 98                 {
 99                     showGroup : true,
100                     scrollbarSize : 0,
101                     columns : [ [ {
102                         field : 'name',
103                         title : '属性名',
104                         width : 100,
105                         sortable : false
106                     }, {
107                         field : 'value',
108                         title : '属性值',
109                         width : 300,
110                         resizable : true
111                     } ] ]
112 
113                 });
114 
115     };
116     
117     //事件方法
118     UPMS.onSave=function(){
119         var xml=UPMS.toXml()
120         if(xml)
121             {
122             var root = this.tree.tree('getRoot');
123             $.post(root.url,{data:xml.html()});
124             }
125     };
126 
127     /*
128      * <?xml version="1.0" encoding="UTF-8"?>
129      * <jxr:upms xmlns:jxr="http://www.jxr.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.jxr.com upms.xsd ">
130      * <jxr:user jxr:id="6" jxr:name=""/>
131      * <jxr:role jxr:id="" jxr:name="">
132      * <jxr:user jxr:id="6"/>
133      *  </jxr:role>
134      * <jxr:role jxr:id="" jxr:name="">
135      * <jxr:user jxr:id="6"/>
136      * </jxr:role>
137      *  <jxr:group jxr:id="" jxr:name="">
138      *   <jxr:user jxr:id=""/>
139      *   <jxr:role jxr:id=""/>
140      *  </jxr:group>
141      *  <jxr:group jxr:id="" jxr:name="">
142      *  <jxr:user jxr:id=""/>
143      *   <jxr:role jxr:id=""/>
144      * </jxr:group>
145      * </jxr:upms>
146      */
147     UPMS.toXml = function() {
148         var root = this.tree.tree('getRoot');
149         if (root.url) {
150             var data = this.tree.tree('getData', root.target);
151             // 保存结果
152             var obj = $('<jxr:upms></jxr:upms>');
153             obj.attr("xmlns:jxr","http://www.jxr.com").attr("xmlns:xsi","http://www.w3.org/2001/XMLSchema-instance");
154             // 对应Users对象
155             var users = data.children[0];
156             // 对应Roles对象
157             var roles = data.children[1];
158             // 对应Groups对象
159             var groups = data.children[2];
160             if (users.children)
161                 for (var i = 0; i < users.children.length; i++) {
162                     // 对应于User对象
163                     var user = users.children[i];
164                     if (!user.text) {
165                         $$.error('请输入用户名.');
166                         this.tree.tree('select', user.target);
167                         return;
168                     }
169                     obj.append($("<jxr:user></jxr:user>").attr("jxr:id",user.id).attr("jxr:name",user.text));
170                 }
171             // 获取所有的role
172             if (roles.children)
173                 for (var i = 0; i < roles.children.length; i++) {
174                     // 对应于Role对象
175                     var role = roles.children[i];
176                     if (!role.text) {
177                         $$.error('请输入角色名.');
178                         this.tree.tree('select', role.target);
179                         return;
180                     }
181                     var r=$("<jxr:role></jxr:role>").attr("jxr:id",role.id).attr("jxr:name",role.text).appendTo(obj);
182                     // 获取所有的UserRef对象
183                     if (role.children)
184                         for (var j = 0; j < role.children.length; j++) {
185                             // 对应于UserRef对象
186                             var userRef = role.children[j];
187                             if (!userRef.id) {
188                                 $$.error('请选择id.');
189                                 this.tree.tree('select', userRef.target);
190                                 return;
191                             }
192                             r.append($("<jxr:user></jxr:user>").attr("jxr:id",userRef.id));
193                         }
194                     
195                 }
196             // 获取所有的group
197             if (groups.children)
198                 for (var i = 0; i < groups.children.length; i++) {
199                     // 对应于Group对象
200                     var group = groups.children[i];
201                     if (!group.text) {
202                         $$.error('请输入组名字.');
203                         this.tree.tree('select', group.target);
204                         return;
205                     }
206                     var g=$("<jxr:group></jxr:group>").attr("jxr:id",group.id).attr("jxr:name",group.text).appendTo(obj);
207                     
208                     // 获取所有的UserRef对象
209                     if (group.children)
210                         for (var j = 0; j < group.children.length; j++) {
211                             // 对应于UserRef或者RoleRef对象
212                             var ref = group.children[j];
213                             if (!ref.id) {
214                                 $$.error('请选择id.');
215                                 this.tree.tree('select', ref.target);
216                                 return;
217                             }
218                             // 用户引用
219                             if (ref.constructor == UserRef) {
220                                 g.append($("<jxr:user></jxr:user>").attr("jxr:id",ref.id));
221                             }
222                             // 角色引用
223                             else if (ref.constructor == RoleRef) {
224                                 g.append($("<jxr:role></jxr:role>").attr("jxr:id",ref.id));
225                             }
226                         }
227                     
228                 }
229             return $("<div></div>").append(obj);
230         } else {
231             $$.error('请输入保存的URL地址.');
232             this.tree.tree('select', root.target);
233         }
234     };
235 
236     /*
237      * 保存,数据格式:
238      * {users:[{id:..,name:..},{}...],roles:[{id:..,name:..,users:[{id:..},{},...]},{}...],
239      * groups:[{id:..,name:..,users:[{id:..},{},...],roles:[{id:..},{},...]},{}...]}
240      */
241     UPMS.toJson = function() {
242         var root = this.tree.tree('getRoot');
243         if (root.url) {
244             var data = this.tree.tree('getData', root.target);
245             // 保存结果
246             var obj = {};
247             // 对应Users对象
248             var users = data.children[0];
249             // 对应Roles对象
250             var roles = data.children[1];
251             // 对应Groups对象
252             var groups = data.children[2];
253             // 获取所有的user
254             obj.users = [];
255             if (users.children)
256                 for (var i = 0; i < users.children.length; i++) {
257                     // 对应于User对象
258                     var user = users.children[i];
259                     if (!user.text) {
260                         $$.error('请输入用户名.');
261                         this.tree.tree('select', user.target);
262                         return;
263                     }
264                     obj.users.push({
265                         id : user.id,
266                         name : user.text
267                     });
268                 }
269             // 获取所有的role
270             obj.roles = [];
271             if (roles.children)
272                 for (var i = 0; i < roles.children.length; i++) {
273                     // 对应于Role对象
274                     var role = roles.children[i];
275                     if (!role.text) {
276                         $$.error('请输入角色名.');
277                         this.tree.tree('select', role.target);
278                         return;
279                     }
280                     // 存储引用
281                     var r = {
282                         id : role.id,
283                         name : role.text
284                     };
285                     r.users = [];
286                     // 获取所有的UserRef对象
287                     if (role.children)
288                         for (var j = 0; j < role.children.length; j++) {
289                             // 对应于UserRef对象
290                             var userRef = role.children[j];
291                             if (!userRef.id) {
292                                 $$.error('请选择id.');
293                                 this.tree.tree('select', userRef.target);
294                                 return;
295                             }
296                             r.users.push({
297                                 id : userRef.id
298                             });
299                         }
300                     obj.roles.push(r);
301                 }
302             // 获取所有的group
303             obj.groups = [];
304             if (groups.children)
305                 for (var i = 0; i < groups.children.length; i++) {
306                     // 对应于Group对象
307                     var group = groups.children[i];
308                     if (!group.text) {
309                         $$.error('请输入组名字.');
310                         this.tree.tree('select', group.target);
311                         return;
312                     }
313                     // 存储引用
314                     var g = {
315                         id : group.id,
316                         name : group.text
317                     };
318                     // 存储user引用
319                     g.users = [];
320                     // 存储角色引用
321                     g.roles = [];
322                     // 获取所有的UserRef对象
323                     if (group.children)
324                         for (var j = 0; j < group.children.length; j++) {
325                             // 对应于UserRef或者RoleRef对象
326                             var ref = group.children[j];
327                             if (!ref.id) {
328                                 $$.error('请选择id.');
329                                 this.tree.tree('select', ref.target);
330                                 return;
331                             }
332                             // 用户引用
333                             if (ref.constructor == UserRef) {
334                                 g.users.push({
335                                     id : ref.id
336                                 });
337                             }
338                             // 角色引用
339                             else if (ref.constructor == RoleRef) {
340                                 g.roles.push({
341                                     id : ref.id
342                                 });
343                             }
344                         }
345                     obj.groups.push(g);
346                 }
347             return obj;
348         } else {
349             $$.error('请输入保存的URL地址.');
350             this.tree.tree('select', root.target);
351         }
352     };
353 
354     // 清除选中
355     UPMS.onClear = function() {
356         // 获取选中的节点
357         var node = this.tree.tree('getSelected');
358         if (node) {
359             this.tree.tree('select', null);
360             // 属性表清空
361             this.propertygrid.propertygrid('loadData', []);
362         }
363     };
364 
365     // 重置
366     UPMS.onCancel = function() {
367         // 属性表清空
368         this.propertygrid.propertygrid('loadData', []);
369         // 清空树
370         this.tree.tree('loadData', [ {
371             "id" : "0",
372             "text" : "权限管理",
373             "children" : [ new Users(), new Roles(), new Groups() ]
374         } ]);
375     };
376 
377     // 删除事件
378     UPMS.onRemove = function() {
379         // 获取选中的节点
380         var node = this.tree.tree('getSelected');
381         if (node) {
382             // 根节点
383             if (node.id === '0') {
384                 $$.error('根节点不允许删除.');
385             }
386             // 一级子节点
387             else if (node.id === Users.ID || node.id === Roles.ID
388                     || node.id === Groups.ID) {
389                 $$.error('一级子节点不允许删除.');
390             } else {
391                 node.remove();
392                 // 属性表清空
393                 this.propertygrid.propertygrid('loadData', []);
394             }
395         }
396         // 没有选中
397         else {
398             $$.error('没有选中任何节点.');
399         }
400     };
401 
402     // 追加事件
403     UPMS.onAppend = function(command) {
404         // 获取选中的节点
405         var node = this.tree.tree('getSelected');
406         if (node) {
407             // 根节点
408             if (node.id === '0') {
409                 $$.error('根节点不允许追加子节点.');
410             }
411             // 一级子节点
412             else if (node.id === Users.ID || node.id === Roles.ID
413                     || node.id === Groups.ID) {
414                 node.add();
415             }
416             // 二级子节点
417             else if (node.constructor == User) {
418                 $$.error('用户节点不允许追加子节点.');
419             } else if (node.constructor == Role) {
420                 node.addUserRef();
421             } else if (node.constructor == Group) {
422                 if (command == '用户引用') {
423                     node.addUserRef();
424                 } else if (command == '角色引用') {
425                     node.addRoleRef();
426                 }
427             }
428             // 三级子节点
429             else if (node.constructor == UserRef || node.constructor == RoleRef) {
430                 $$.error('引用节点不允许追加子节点.');
431             }
432         }
433         // 没有选中
434         else {
435             $$.error('没有选中任何节点.');
436         }
437     };
438 
439     // 改变追加按钮的菜单项
440     UPMS.select = function(node) {
441         // 菜单
442         var menu = $('#upms-mm');
443         // 根节点
444         if (node.id === '0') {
445             // 追加按钮不可用
446             this.addButton.menubutton('disable');
447 
448         }
449         // 一级子节点
450         else if (node.id === Users.ID) {
451             // 追加按钮可用
452             this.addButton.menubutton('enable');
453             menu.menu('enableItem', menu.menu('findItem', '追加用户').target).menu(
454                     'disableItem', menu.menu('findItem', '追加角色').target).menu(
455                     'disableItem', menu.menu('findItem', '追加组').target).menu(
456                     'disableItem', menu.menu('findItem', '追加引用').target);
457         } else if (node.id === Roles.ID) {
458             // 追加按钮可用
459             this.addButton.menubutton('enable');
460             menu.menu('enableItem', menu.menu('findItem', '追加角色').target).menu(
461                     'disableItem', menu.menu('findItem', '追加用户').target).menu(
462                     'disableItem', menu.menu('findItem', '追加组').target).menu(
463                     'disableItem', menu.menu('findItem', '追加引用').target);
464         } else if (node.id === Groups.ID) {
465             // 追加按钮可用
466             this.addButton.menubutton('enable');
467             menu.menu('enableItem', menu.menu('findItem', '追加组').target).menu(
468                     'disableItem', menu.menu('findItem', '追加角色').target).menu(
469                     'disableItem', menu.menu('findItem', '追加用户').target).menu(
470                     'disableItem', menu.menu('findItem', '追加引用').target);
471         }
472         // 二级子节点
473         else if (node.constructor == User) {
474             // 追加按钮不可用
475             this.addButton.menubutton('disable');
476 
477         } else if (node.constructor == Role) {
478             // 追加按钮可用
479             this.addButton.menubutton('enable');
480             menu.menu('disableItem', menu.menu('findItem', '追加用户').target)
481                     .menu('disableItem', menu.menu('findItem', '追加角色').target)
482                     .menu('disableItem', menu.menu('findItem', '追加组').target)
483                     .menu('enableItem', menu.menu('findItem', '追加引用').target)
484                     .menu('enableItem', menu.menu('findItem', '用户引用').target)
485                     .menu('disableItem', menu.menu('findItem', '角色引用').target);
486 
487         } else if (node.constructor == Group) {
488             // 追加按钮可用
489             this.addButton.menubutton('enable');
490             menu.menu('disableItem', menu.menu('findItem', '追加用户').target)
491                     .menu('disableItem', menu.menu('findItem', '追加角色').target)
492                     .menu('disableItem', menu.menu('findItem', '追加组').target)
493                     .menu('enableItem', menu.menu('findItem', '追加引用').target)
494                     .menu('enableItem', menu.menu('findItem', '用户引用').target)
495                     .menu('enableItem', menu.menu('findItem', '角色引用').target);
496         }
497         // 三级子节点
498         else if (node.constructor == UserRef || node.constructor == RoleRef) {
499             // 追加按钮不可用
500             this.addButton.menubutton('disable');
501         }
502     };
503 
504     // 选中某个节点
505     UPMS.onSelect = function(node) {
506         this.select(node);
507         var props = [];
508         // 根节点
509         if (node.id === '0') {
510             props = [ {
511                 "field" : "url",
512                 "name" : "保存地址",
513                 "value" : node.url || '形如:http://www.baidu.com',
514                 "group" : "可修改",
515                 "editor" : {
516                     "type" : "textbox",
517                     "options" : {
518                         "prompt" : '不超过500个字符',
519                         "required" : true,
520                         //"validType" : "url",
521                         "onChange" : function(newValue, oldValue) {
522 
523                             if (newValue && oldValue && newValue != oldValue) {
524                                 // 保存修改的url
525                                 node.url = newValue;
526                             }
527 
528                         }
529                     }
530                 }
531             } ];
532         }
533         // 一级子节点
534         else if (node.id === Users.ID || node.id === Roles.ID
535                 || node.id === Groups.ID) {
536             props = [ {
537                 "field" : "id",
538                 "name" : "标识符",
539                 "value" : node.id,
540                 "group" : "不可修改"
541             }, {
542                 "field" : "title",
543                 "name" : "名字",
544                 "value" : node.text,
545                 "group" : "不可修改"
546             } ];
547         }
548         // 三级子节点
549         else if (node.constructor == UserRef || node.constructor == RoleRef) {
550             props = [ {
551                 "field" : "id",
552                 "name" : "引用标识符",
553                 "value" : node.id || '请选择',
554                 "group" : "可修改",
555                 "editor" : {
556                     "type" : "combobox",
557                     "options" : {
558                         "required" : true,
559                         "editable" : false,
560                         "panelHeight" : 'auto',
561                         "valueField" : "id",
562                         "textField" : "id",
563                         "data" : (node.constructor == UserRef ? UPMS.tree.tree(
564                                 'find', Users.ID) : UPMS.tree.tree('find',
565                                 Roles.ID)).getIds(),
566                         "onChange" : function(newValue, oldValue) {
567 
568                             if (newValue && oldValue && newValue != oldValue) {
569                                 node.id = newValue;
570                             }
571 
572                         }
573                     }
574                 }
575             } ];
576         }
577         // 二级子节点
578         else if (node.constructor == User || node.constructor == Role
579                 || node.constructor == Group) {
580             props = [ {
581                 "field" : "id",
582                 "name" : "标识符",
583                 "value" : node.id,
584                 "group" : "不可修改"
585             }, {
586                 "field" : "text",
587                 "name" : "名字",
588                 "value" : node.text || "用户名/角色名/组名",
589                 "group" : "可修改",
590                 "editor" : {
591                     "type" : "textbox",
592                     "options" : {
593                         "prompt" : '不超过50个字符',
594                         "required" : true,
595                         "validType" : "length[1,50]",
596                         "onChange" : function(newValue, oldValue) {
597 
598                             if (newValue && oldValue && newValue != oldValue) {
599                                 // 保存修改的text
600                                 node.setText(newValue);
601                             }
602 
603                         }
604                     }
605                 }
606             } ];
607         }
608         // 刷新属性列表
609         this.propertygrid.propertygrid('loadData', props);
610     };
611 
612     /*
613      * 定义一个视图类:Node,代表树节点
614      */
615     function Node(id, text) {
616         this.id = id;
617         this.text = text;
618     }
619 
620     /*
621      * 定义一个视图类:Users,继承Node
622      */
623     var Users = function() {
624         Node.call(this, Users.ID, Users.TEXT);
625     };
626 
627     // 定义常量
628     Users.TEXT = '用户';
629     Users.ID = '10';
630 
631     // 获取所有的用户ID
632     Users.prototype.getIds = function() {
633         var ids = [];
634         // 得到儿子节点
635         var array = UPMS.tree.tree('getChildren', this.target);
636         for (var i = 0; i < array.length; i++) {
637             // 如果是User节点
638             if (array[i].constructor == User) {
639                 ids.push({
640                     id : array[i].id
641                 });
642             }
643         }
644         return ids;
645     };
646 
647     // 追加用户
648     Users.prototype.add = function() {
649         var ids = this.getIds();
650         var id = ids.length == 0 ? '0' : Number(ids[ids.length - 1].id.replace(
651                 this.id, '')) + 1;
652         var user = new User(this.id + id, "");
653         // 刷新界面
654         UPMS.tree.tree('append', {
655             parent : this.target,
656             data : [ user ]
657         });
658         return this;
659     };
660 
661     /*
662      * 定义一个视图类:Roles,继承Node
663      */
664     var Roles = function() {
665         Node.call(this, Roles.ID, Roles.TEXT);
666     };
667     // 定义常量
668     Roles.TEXT = '角色';
669     Roles.ID = '11';
670 
671     // 获取所有的角色ID
672     Roles.prototype.getIds = function() {
673         var ids = [];
674         // 得到儿子节点
675         var array = UPMS.tree.tree('getChildren', this.target);
676         for (var i = 0; i < array.length; i++) {
677             // 如果是User节点
678             if (array[i].constructor == Role) {
679                 ids.push({
680                     id : array[i].id
681                 });
682             }
683         }
684         return ids;
685     };
686 
687     // 追加角色
688     Roles.prototype.add = function() {
689         var ids = this.getIds();
690         var id = ids.length == 0 ? '0' : Number(ids[ids.length - 1].id.replace(
691                 this.id, '')) + 1;
692         var role = new Role(this.id + id, "");
693         // 刷新界面
694         UPMS.tree.tree('append', {
695             parent : this.target,
696             data : [ role ]
697         });
698         return this;
699     };
700 
701     // 删除一个用户的引用
702     Roles.prototype.removeUsers = function(userId) {
703         // 得到儿子节点
704         var array = UPMS.tree.tree('getChildren', this.target);
705         for (var i = 0; i < array.length; i++) {
706             // 如果是User节点
707             if (array[i].constructor == UserRef) {
708                 if (array[i].id == userId)
709                     // 移除引用
710                     array[i].remove();
711             }
712         }
713         return this;
714     };
715 
716     /*
717      * 定义一个视图类:Groups,继承Node
718      */
719     var Groups = function() {
720         Node.call(this, Groups.ID, Groups.TEXT);
721     };
722 
723     // 定义常量
724     Groups.TEXT = '组';
725     Groups.ID = '12';
726 
727     // 统计个数
728     Groups.prototype.maxId = function() {
729         var max = '0';
730         // 得到儿子节点
731         var array = UPMS.tree.tree('getChildren', this.target);
732         for (var i = 0; i < array.length; i++) {
733             // 如果是User节点
734             if (array[i].constructor == Group && array[i].id > max) {
735                 max = array[i].id;
736             }
737         }
738         return max;
739     };
740 
741     // 追加一个组
742     Groups.prototype.add = function() {
743         var id = Number(this.maxId().replace(this.id, '')) + 1;
744         var group = new Group(this.id + id, "");
745         // 刷新界面
746         UPMS.tree.tree('append', {
747             parent : this.target,
748             data : [ group ]
749         });
750         return this;
751     };
752 
753     // 删除一个用户的引用
754     Groups.prototype.removeUsers = function(userId) {
755         // 得到儿子节点
756         var array = UPMS.tree.tree('getChildren', this.target);
757         for (var i = 0; i < array.length; i++) {
758             // 如果是User节点
759             if (array[i].constructor == UserRef) {
760                 if (array[i].id == userId)
761                     array[i].remove();
762             }
763         }
764         return this;
765     };
766 
767     // 删除一个角色的引用
768     Groups.prototype.removeRoles = function(roleId) {
769         // 得到儿子节点
770         var array = UPMS.tree.tree('getChildren', this.target);
771         for (var i = 0; i < array.length; i++) {
772             // 如果是User节点
773             if (array[i].constructor == RoleRef) {
774                 if (array[i].id == userId)
775                     array[i].remove();
776             }
777         }
778         return this;
779     };
780 
781     /*
782      * 定义一个视图类:UserRef,继承Node
783      */
784     function UserRef(id) {
785         Node.call(this, id, '用户引用');
786     }
787 
788     // 删除
789     UserRef.prototype.remove = function() {
790         // 刷新界面
791         UPMS.tree.tree('remove', this.target);
792         return this;
793     };
794 
795     /*
796      * 定义一个视图类:RoleRef,继承UserRef
797      */
798     function RoleRef(id) {
799         Node.call(this, id, '角色引用');
800     }
801 
802     // 寄生式组合继承法
803     RoleRef.prototype = $$.clone(UserRef.prototype);
804     // 修改构造器
805     RoleRef.prototype.constructor = RoleRef;
806 
807     /*
808      * 定义一个视图类:User,继承Node
809      */
810     function User(id, text) {
811         Node.call(this, id, text);
812     }
813 
814     // 删除用户
815     User.prototype.remove = function() {
816         // 刷新界面
817         UPMS.tree.tree('remove', this.target);
818         // 得到Roles节点
819         var roles = UPMS.tree.tree('find', Roles.ID);
820         // 在Roles节点中移除所有的引用
821         roles.removeUsers(this.id);
822         // 得到Groups节点
823         var groups = UPMS.tree.tree('find', Groups.ID);
824         // 在Groups节点中移除所有的引用
825         groups.removeUsers(this.id);
826         return this;
827     };
828 
829     // 更新text
830     User.prototype.setText = function(text) {
831         this.text = text;
832         // 刷新界面
833         UPMS.tree.tree('update', {
834             target : this.target,
835             text : text
836         });
837         return this;
838     };
839 
840     /*
841      * 定义一个视图类:Role,继承User类
842      */
843     function Role(id, text) {
844         User.call(this, id, text);
845     }
846 
847     // 寄生式组合继承法
848     Role.prototype = $$.clone(User.prototype);
849     // 修改构造器
850     Role.prototype.constructor = Role;
851 
852     // 追加用户
853     Role.prototype.addUserRef = function() {
854         var ref = new UserRef("");
855         // 刷新界面
856         UPMS.tree.tree('append', {
857             parent : this.target,
858             data : [ ref ]
859         });
860         return this;
861     };
862 
863     // 移除角色
864     Role.prototype.remove = function() {
865         // 刷新界面
866         UPMS.tree.tree('remove', this.target);
867         // 得到Groups节点
868         var groups = UPMS.tree.tree('find', Groups.ID);
869         // 在Groups节点中移除所有的引用
870         groups.removeRoles(this.id);
871         return this;
872     };
873 
874     /*
875      * 定义一个视图类:Group,继承Role类
876      */
877     function Group(id, text) {
878         Role.call(this, id, text);
879     }
880     // 克隆父类原型
881     Group.prototype = $$.clone(Role.prototype);
882     // 修改构造器
883     Group.prototype.constructor = Group;
884     // 追加角色
885     Group.prototype.addRoleRef = function() {
886         var ref = new RoleRef("");
887         // 刷新界面
888         UPMS.tree.tree('append', {
889             parent : this.target,
890             data : [ ref ]
891         });
892         return this;
893     };
894 
895     // 删除
896     Group.prototype.remove = function() {
897         // 刷新界面
898         UPMS.tree.tree('remove', this.target);
899         return this;
900     };
901 
902 })();

客户端运行效果:

转载于:https://www.cnblogs.com/jjh-java/p/6693242.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值