Etmvc+jquery Easyui+combobox Multi-value operation to implement role authorization instance _jquery

Source: Internet
Author: User

role-based Rights Management generally has 5 tables, the following figure, here we want to implement the role of the authorization operation, simply to add to the Rolemenu, where the front end mainly with Easyui-combobox to achieve multiple choice.

The general idea is to initialize the ComboBox, bind all the permissions, and then, based on the current role, get the permissions that the role already has, set ComboBox to select those permissions, and finally modify the permissions, get the ComboBox selected value sent to the back end for saving.

1, control initialization
First the front-end HTML, the value of setting ComboBox is the role Id,text is the role name, the code is as follows:

<table class= "Grid" > 
<tr> 
<td colspan= "2" ><input id= "id" name= "id" type= "hidden"/> 
</td> 
</tr> 
<tr> 
<td> role name:</td> 
<td><input name= " RoleName "class=" Easyui-validatebox " 
readonly></input></td> 
</tr> 
<tr> 
<td> Role Permissions:</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: ' > 
</select></td> 
</tr> 
</table> 

The backend gets all the permissions on the system, which is the record of the menu table, the code reads as follows:

Public Jsonview Getallmenus () throws exception{ 
 list<menu> menus = menu.findall (menu.class); 
 
 return new Jsonview (menus); 

2. Get the rights currently owned by the role

The front-end JS script gets the ID of the current role to send to the backend to get the ID array of the permissions that the role has, as follows:

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) { 
    //Get the ID of the permission menu 
    var t=[]; 
    Jsonlist=result.rows; 
    for (Var i=0;i<jsonlist.length;i++) { 
    t[i]=jsonlist[i].muid 
    } 
    $ (' #roleRight '). ComboBox (' Setvalues ', t);//Set ComboBox checked value 
   } else { 
   $.messager.alert (' wrong ', ' error ', ' ERROR ') ; 
   } 
  }, ' json '; 
 Form.form (' Load ', '/ciccpsmember/admin/getadminbyid/' +row.id); 
 Form1.url = '/ciccpsmember/role/authorize/?id= ' +row.id; 
 } else { 
 $.messager.show ({ 
  title: ' Warning ', 
  msg: ' Please select the information record first. ' 
 }); 
 } 
} 

The back end is based on the ID of the role from the front of the query database to get the corresponding permission ID returned to the client, the code is as follows:

Returns the permission ID public 
Jsonview getmenusbyrid (Integer id) throws Exception { 
 list<rolemenus> Rolemenuss = by role Rolemenus.findall (rolemenus.class, "rid =?", new Object[]{id}); Get the Permission ID 
 
 //construct the data structure for JSON using the role ID in the Rolemenu table and return to the JSON view 
 map<string, object> result = new hashmap<string, Object> (); 
 Result.put ("Rows", Rolemenuss); 
 Return to new Jsonview (result); 
} 

3, submit the modified role permissions

Front-end JS script to get ComboBox selected value sent to the back end, remember the ComboBox value of the escape code, to be transmitted in 1%2C2%2C3 form, otherwise to the back end of a value, the code is as follows:

function authorize () { 
 var id=$ (' #id '). attr ("value"); 
 var r = $ (' #roleRight '). ComboBox (' GetValues '); 
 var rr=escape (R); 
 $.messager.alert (' wrong ', id+ ' ddd ' +rr, ' error '); 
 $.post ('/ciccpsmember/role/authorize ', {ID:ID,RR:RR}, 
  function (result) { 
   if (result.success) { 
   Win1.window (' close '); 
   $.messager.show ({ 
   title: ' Hint ', 
   msg: ' The role is authorized successfully. ' 
   }); 
   } else { 
   $.messager.alert (' Errors ', result.msg, ' Error '); 
   } 
  , ' json '); 
 
 

The backend gets the value from the front end, carries on the database operation, the code is as follows:

/** 
 * Authorized operation/Public 
Jsonview authorize (Integer id,string RR) throws Exception { 
 
 //delete old 
 Rolemenus.destroyall (rolemenus.class, "rid =?", new Object[]{id}); 
 
 Append new 
 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"); 
} 

At this point, the role of the authorization to achieve, there are two main points to note, one is to assign multiple values ComboBox, the other is to get ComboBox multiple values (1,2,3) after the escape code to the back end. The effect chart is as follows:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.