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

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

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

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

rush:xhtml;"> 名称：Box" name="roleRight" data-options=" url:'/ciccpsMember/menu/getAllMenus',editable:false,required:true,valueField:'menuid',textField:'menuname',multiple:true,panelHeight:'100'">

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

rush:java;"> public JsonView getAllMenus() throws Exception{ List menus = Menu.findAll(Menu.class);

return new JsonView(menus);
}

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

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

rush:js;"> 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;iBox('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返回给客户端，代码如下：

rush:java;"> //根据角色返回权限id public JsonView getMenusByRid(Integer id) throws Exception { List 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的形式传送，否则到后端就剩一个值了，代码如下：

rush:js;"> 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,'json');

}

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

rush:java;"> /** * 授权操作 */ public JsonView authorize(Integer id,String rr) throws Exception {

//删除旧的
Rolemenus.destroyAll(Rolemenus.class,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编码后再传到后端。效果图如下：