etmvc jQuery EasyUI组合框多值操作实现角色授权实例

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

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

1、控件初始化先是前端html，设置组合框的价值是角色id，文本是角色名字，代码如下：

table class=' grid ' tr TD colspan=' 2 '输入id=' id ' name=' id ' type=' hidden '/TD/tr TD角色名称：/TD TD输入名称=' RoLename ' class=' easy ui-validate box '只读/输入/TD/tr TD角色权限：/TD TD select id=' role right ' class=' easyui-combobox ' name=' role right ' data-options=' URL : '/CICP member/menu/getAllMenus '，editable:false，required:true，valueField:'menuid '，textField:'menuname '，multiple:true，面板高度3360 ' 100 ' '/select/TD/tr/table后端获取系统所有的权限，也就是菜单表的记录，代码如下：

公共JsonView getAllMenus()抛出异常{ listmonmenu menu=menu。findall(菜单。类)；返回新的JsonView(菜单);} 2、获取角色当前拥有的权限

前端射流研究…脚本获取当前角色角色；作用；任务；职责的编号发送到后端获取该角色拥有的权限的编号数组，如下：

函数new authorize(){ var row=grid。data grid(' GetSelected ')；if(row){ win 1。窗口('打开')；form1.form('load '，row)；$.post('/CICP member/role/getMenusByRid '，{ id:row.id}，function(result) { if (result) { //获取权限菜单的id var t=[]；jsonList=result . row for(var I=0；I jsonList . lengthi){ t[I]=jsonList[I].muid} $('#roleRight ').combobox('setValues '，t)；//设置组合框的选中值} else { $.messager.alert('错误','出错了，'错误');} }，' JSON ')；//form.form('load '，'/CICP member/admin/getadminnnbyid/'行。id)；//表格1。URL='/CICP member/role/authorize/？id=' row。id；} else { $。信使。显示({ title : '警告，msg: '请先选择信息记录。' });} } 后端根据前端传来的角色；作用；任务；职责的编号查询数据库获取对应的权限编号返回给客户端，代码如下：

//根据角色返回权限id公共JsonView getMenusByRid(整数id)引发异常{ ListRolemenus角色菜单=角色菜单。全部查找(角色菜单。类)，“rid=？”,新对象[]{ id })；//根据角色编号在角色菜单表中获取权限id /构造JSON用的数据结构并返回JSON视图映射字符串，对象结果=新HashMapString，对象();结果。put(' row '，角色菜单)；返回新的JsonView(结果);} 3、提交修改后的角色权限

前端射流研究…脚本获取组合框选中的值发送到后端，记住对组合框值进行逃跑编码，要以1,2,3的形式传送，否则到后端就剩一个值了，代码如下：

函数authorize(){ var id=$('#id ').attr(' value ')；var r=$('#roleRight ').combobox(' GetVaLues ')；var RR=escape(r)；//$.messager.alert('错误，id 'ddd' rr '错误');$.post('/CICP member/role/authorize '，{ id:id，rr:rr }，function(result){ if(result。成功){ win 1。窗口(‘关闭’)；$.messager.show({ title: '提示，msg: '角色授权成功。' });} else { $.messager.alert('错误，result.msg，' error ')；} }，' JSON ')；} 后端获取前端传过来的值，进行数据库操作，代码如下：

/* * * authorize操作*/public JSON view authorize(整数id，字符串RR)抛出异常{//删除旧的role menu . destroy all(role menu . class，' rid=？'，新对象[]{ id })；//添加新的String[] ary=rr.split('，')；Rolemenus rm=nullfor(String item : ary){//system . out . println(item)；RM=new role menus()；RM . SetRid(id)；RM . setmuid(integer . parsent(item))；RM . save()；}返回新的JSonView(' success : true ')；}至此，角色授权已经实现。有两点需要注意。一个是给combobox分配多个值的问题，另一个是获取combobox的多个值(1，2，3)，然后进行转义编码后再传输到后端。效果图如下：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。