权限管理系统的设计几乎在每个应用里面都会涉及到,如何在应用中自定义权限,需要客户端界面和服务器端。在这里我开发了一个通用权限管理系统,可以集成到任何一个应用中,所有的代码在百度云盘分享,分享地址如下: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 })();
客户端运行效果: