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

 更新时间:2016年11月09日 11:15:58   作者:wangqiuyun  
本篇文章主要介绍了etmvc+jQuery EasyUI+combobox多值操作实现角色授权,实现对角色role进行授权操作,有需要的可以了解一下。

基于角色的权限管理一般有5张表构成,如下图,这里我们要实现对角色role进行授权操作,简单来说就是要对rolemenu进行添加操作,这里前端主要用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编码后再传到后端。效果图如下:

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

相关文章

  • jquery实现用户登陆界面(示例讲解)

    jquery实现用户登陆界面(示例讲解)

    下面小编就为大家带来一篇jquery实现用户登陆界面(示例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 一款简单的jQuery图片标注效果附源码下载

    一款简单的jQuery图片标注效果附源码下载

    在一些电商网站和家居网站上我们会看到这样的应用,一张图片中显示多种商品,点击每个商品可以弹出对应商品的简单介绍,包括价格等等,极大的提高了用户体验,今天我们通过实例给大家分享使用jQuery插件来实现这一效果
    2016-03-03
  • jQuery横向擦除焦点图特效代码分享

    jQuery横向擦除焦点图特效代码分享

    这篇文章主要介绍了jQuery横向擦除焦点图特效,一个具有自己特色的焦点图会吸引用户的注意力,让用户产生浏览网站的兴趣至关重要,现在小编推荐给大家一款特别棒的焦点图,感兴趣的小伙伴可以参考下。
    2015-09-09
  • JQuery each()函数如何优化循环DOM结构的性能

    JQuery each()函数如何优化循环DOM结构的性能

    each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量
    2012-12-12
  • jquery parent和parents的区别分析

    jquery parent和parents的区别分析

    从字面上不难看出parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选
    2013-10-10
  • jQuery中验证表单提交方式及序列化表单内容的实现

    jQuery中验证表单提交方式及序列化表单内容的实现

    之前项目中使用的表单提交方式,使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中,下面有个不错的示例大家可以参考下
    2014-01-01
  • jQuery实现动态删除LI的方法

    jQuery实现动态删除LI的方法

    这篇文章主要介绍了jQuery实现动态删除LI的方法,结合实例形式分析了jQuery针对页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2017-05-05
  • jQuery实现鼠标经过购物车出现下拉框代码(推荐)

    jQuery实现鼠标经过购物车出现下拉框代码(推荐)

    在做web前端项目开发的时候,使用jquery库的感触颇多,下面小编通过写购物车的下拉框做法,把我的想法给大家分享一下,感兴趣的朋友可以参考下
    2016-07-07
  • jquery简单实现纵向的无缝滚动代码实例

    jquery简单实现纵向的无缝滚动代码实例

    这篇文章主要介绍了jquery简单实现纵向的无缝滚动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 如何使用jQuery Draggable和Droppable实现拖拽功能

    如何使用jQuery Draggable和Droppable实现拖拽功能

    本篇文章是对使用jQuery Draggable和Droppable实现拖拽功能的方法进行了详细的分析介绍,需要的朋友参考下
    2013-07-07

最新评论