etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例


Posted in Javascript onNovember 09, 2016

基于角色的权限管理一般有5张表构成,如下图,这里我们要实现对角色role进行授权操作,简单来说就是要对rolemenu进行添加操作,这里前端主要用easyui-combobox来实现权限多选。etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例

总体思路是先初始化combobox,绑定所有的权限;然后根据当前的角色获取该角色已经拥有的权限,设置combobox选中这些权限;最后修改好权限了,获取combobox的选中值发送到后端进行保存。

1、控件初始化
先是前端html,设置combobox的value是角色id,text是角色name,代码如下:

<table class="grid"> 
<tr> 
<td colspan="2"><input id="id" name="id" type="hidden" /> 
</td> 
</tr> 
<tr> 
<td>角色名称:</td> 
<td><input name="roleName" class="easyui-validatebox" 
readonly></input></td> 
</tr> 
<tr> 
<td>角色权限:</td> 
<td><select id="roleRight" class="easyui-combobox" 
name="roleRight" 
data-options=" 
url:'/ciccpsMember/menu/getAllMenus', 
editable:false,required:true, 
valueField:'menuid', 
textField:'menuname', 
multiple:true, 
panelHeight:'100'"> 
</select></td> 
</tr> 
</table>

后端获取系统所有的权限,也就是menu表的记录,代码如下:

public JsonView getAllMenus() throws Exception{ 
 List<Menu> menus = Menu.findAll(Menu.class); 
 
 return new JsonView(menus); 
}

2、获取角色当前拥有的权限

前端JS脚本获取当前角色role的id发送到后端获取该角色拥有的权限的id数组,如下:

function newAuthorize(){ 
 var row = grid.datagrid('getSelected'); 
 if (row){ 
 win1.window('open'); 
 form1.form('load',row); 
 $.post('/ciccpsMember/role/getMenusByRid', { id:row.id}, 
  function(result) { 
   if (result) { 
    //获取权限menu的id 
    var t=[]; 
    jsonList=result.rows; 
    for(var i=0;i<jsonList.length;i++){ 
    t[i]=jsonList[i].muid; 
    } 
    $('#roleRight').combobox('setValues',t);//设置combobox的选中值 
   } else { 
   $.messager.alert('错误','出错了','error'); 
   } 
  },'json'); 
 //form.form('load', '/ciccpsMember/admin/getAdminById/'+row.id); 
 //form1.url = '/ciccpsMember/role/authorize/?id='+row.id; 
 } else { 
 $.messager.show({ 
  title:'警告', 
  msg:'请先选择信息记录。' 
 }); 
 } 
}

后端根据前端传来的role的id查询数据库获取对应的权限id返回给客户端,代码如下:

//根据角色返回权限id 
public JsonView getMenusByRid(Integer id) throws Exception { 
 List<Rolemenus> rolemenuss = Rolemenus.findAll(Rolemenus.class, "rid =?", new Object[]{id}); //根据角色id在rolemenu表中获取权限id 
 
 //构造JSON用的数据结构并返回JSON视图 
 Map<String, Object> result = new HashMap<String, Object>(); 
 result.put("rows", rolemenuss); 
 return new JsonView(result); 
}

3、提交修改后的角色权限

前端JS脚本获取combobox选中的值发送到后端,记住对combobox值进行escape编码,要以1%2C2%2C3的形式传送,否则到后端就剩一个值了,代码如下:

function authorize(){ 
 var id=$('#id').attr("value"); 
 var r = $('#roleRight').combobox('getValues'); 
 var rr=escape(r); 
 //$.messager.alert('错误',id+'ddd'+rr,'error'); 
 $.post('/ciccpsMember/role/authorize', { id:id,rr:rr }, 
  function(result) { 
   if (result.success) { 
   win1.window('close'); 
   $.messager.show({ 
   title:'提示', 
   msg:'角色授权成功。' 
   }); 
   } else { 
   $.messager.alert('错误',result.msg,'error'); 
   } 
  },'json'); 
 
}

后端获取前端传过来的值,进行数据库操作,代码如下:

/** 
 * 授权操作 
 */ 
public JsonView authorize(Integer id,String rr) throws Exception { 
 
 //删除旧的 
 Rolemenus.destroyAll(Rolemenus.class, "rid =?", new Object[]{id}); 
 
 //追加新的 
 String[] ary = rr.split("%2C"); 
 Rolemenus rm=null; 
 for(String item: ary){ 
 //System.out.println(item); 
 rm=new Rolemenus(); 
 rm.setRid(id); 
 rm.setMuid(Integer.parseInt(item)); 
 rm.save(); 
  
 } 
 return new JsonView("success:true"); 
}

至此,角色授权就实现了,主要有两点要注意,一是对combobox赋多个值的问题,另一个就是获取combobox多个值(1,2,3)后要进行escape编码后再传到后端。效果图如下:etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
vue-router传参用法详解
Jan 19 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
JS class语法糖的深入剖析
Jul 07 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 #Javascript
微信小程序 loading 详解及实例代码
Nov 09 #Javascript
微信小程序 toast 详解及实例代码
Nov 09 #Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 #Javascript
微信小程序  modal详解及实例代码
Nov 09 #Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 #Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 #Javascript
You might like
实用函数8
2007/11/08 PHP
php 文件上传系统手记
2009/10/26 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Python和Bash结合在一起的方法
2020/11/13 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
母校寄语大全
2014/04/10 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
诉讼和解协议书
2016/03/23 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python