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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
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
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Django框架验证码用法实例分析
2019/05/10 Python
django实现类似触发器的功能
2019/11/15 Python
Python request使用方法及问题总结
2020/04/26 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
给实习单位的感谢信
2014/02/01 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
2016年国培研修日志
2015/11/13 职场文书
员工安全责任协议书
2016/03/22 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js