Remember before published a "jquery Simple application Summary", and finally have a list of their own choice of two-way, feeling a bit frustrated, yesterday idle nothing improved, the element changed to select option this support shift multiple selection, the amount of code is also streamlined.
My bi-directional selector supports the bulk modification role, supporting keyword query role information. Below the source code:
HTML page:
Copy Code code as follows:
<link href= "@{'/public/stylesheets/ui-lightness/jquery-ui-1.9.1.custom.css '}" rel= "stylesheet" >
<script src= "@{'/public/javascripts/jquery-ui-1.9.1.custom.js '}" ></script>
<form method= "POST" id= "Changeroleform" >
<div class= "List_role_wrap" >
<div class= "Checked_list" >
User List
<p> Name Account </p>
<select id= "Selectl" name= "Selectl" multiple= "multiple" style= "width:220px;height:200px" >
#{list items:activeduserlist,as: ' Items '}
<option param_id= "#{emvf Items.id/}" Param_name= "#{emvf items.name/}" param_account= "#{emVF items.account/}" ># {EMVF items.name/} #{emvf items.account/}</option>
#{/list}
</select>
</div>
<div class= "Role_user_control" style= "position:relative; width:70px; " >
<div class= "COMMON_BTN" >
<input type= "button" value= "Add >>" class= "Common_blue" id= "Addthisrole" >
<input type= "button" value= "Delete <<" class= "Common_blue" id= "Deletethisrole" >
</div>
</div>
<div class= "Belong_role_list" >
Role user List
<p> Name Account </p>
<select id= "selectr" name= "selectr" multiple= "multiple" style= "width:220px;height:200px" >
#{list items:rolelist,as: ' Items '}
<option param_id= "#{emvf Items.id/}" Param_name= "#{emvf items.name/}" param_account= "#{emVF items.account/}" ># {EMVF items.name/} #{emvf items.account/}</option>
#{/list}
</select>
</div>
<div class= "" >
<input type= "text" class= "Set_user_i" value= "Please enter your name/account number" >
<input type= "text" class= "set_user_i_2" value= "Please enter your name/account number" >
</div>
</div>
<div class= "common_btn" style= "position:relative;" >
<input type= "button" value= "reset" class= "Common_blue" id= "Reset_change" >
<input type= "button" value= "Cancel" class= "Common_blue common_cancle" id= "Cancel_change" >
<input type= "button" value= "OK" class= "Common_blue" id= "Submit_change" >
</div>
<input type= "hidden" id= "r_showloading" value= "true"/>
</form>
Here is the JS code:
Copy Code code as follows:
Load user list, role user list
function Changeroledialog (URL, parameters, Rendercontainer) {
Show loading before loading data ...
$.qicloading ({
Target: ' Body ',
Text: "Trying to load ...",
Modal:true,
width:180,
Top: ' 290px ',
Left: ' 450px ',
Postion: "Absolute",
zindex:2000
});
$.ajax ({
Url:url,
Data:parameters,
Type: "Get",
DataType: "HTML",
Success:function (HTML) {
$ (rendercontainer). HTML (HTML);
$ (Rendercontainer). Dialog ({
Autoopen:true,
width:590,
Modal:true,
Resizable:false,
Draggable:true
});
}
});
$.qicloading ({remove:true});//Remove Loading ...
}
$ (function () {
var Leftsel = $ ("#selectL");
var Rightsel = $ ("#selectR");
Click to load user list, role user list
$ (". Add_remove_user"). Live (' click ', function () {
var rid = $ (". Current"). attr ("id"). substring ("ut_". length);
Changeroledialog (Changeroleroute.url (), {Id:rid}, ". Set_user_list");
});
# # # #单击 ' Add/Remove ' Toggle list begin########//
$ ("#addThisRole"). Live ("Click", Function () {
$ ("#selectL option:selected"). each (function () {
$ (this). Remove (). Prependto ("#selectR");
});
});
$ ("#deleteThisRole"). Live ("Click", Function () {
$ ("#selectR option:selected"). each (function () {
$ (this). Remove (). Prependto ("#selectL");
});
});
####### #单击 "Add/Remove" Toggle list end########//
####### #双击option切换列表 begin########//
Leftsel.live (' DblClick ', function () {
$ (this). Find ("option:selected"). each (function () {
$ (this). Remove (). Prependto ("#selectR");
});
});
Rightsel.live (' DblClick ', function () {
$ (this). Find ("option:selected"). each (function () {
$ (this). Remove (). Prependto ("#selectL");
});
});
####### #双击option切换列表 end########//
####### #鼠标按下 Suppress text box prompt messages and focus on begin########//
$ (function () {
$ (". Set_user_i"). Live (' MouseDown ', function () {
if ($ (". Set_user_i"). val () = ' Please enter name/account '} {
$ (". Set_user_i"). Val ("");
$ (". Set_user_i"). Focus;
}
});
$ (". Set_user_i_2"). Live (' MouseDown ', function () {
if ($ (". Set_user_i_2"). val () = ' Please enter name/account '} {
$ (". Set_user_i_2"). Val ("");
$ (". Set_user_i_2"). Focus;
}
})
})
####### Mouse Press to cancel text box prompt message and focus end #######
--In user list input press ENTER to display query results begin----//
$ (". Set_user_i"). Live (' KeyPress ', function (event) {
var keycode = Event.which;
var condition = $ (". Set_user_i"). Val ();
if (keycode = = 13) {
Show loading before loading data ...
$.qicloading ({
Target: ' Body ',
Text: "Trying to load ...",
Modal:true,
width:180,
Top: ' 290px ',
Left: ' 450px ',
Postion: "Absolute",
zindex:2000
});
$.ajax ({
Url:getUserRount.url (),
Data:{condition:condition},
Type: "Get",
DataType: "JSON",
Success:function (data) {
var select = $ ("#selectL");
if (Data.length = = 0) {
$ ("#selectL option"). Remove ();
var option = $ ("<option style= ' color: #f6a828; ' default_value= ' Noresult ' ></option>")
. Append (' No matching query results ')
Select.append (option);
$.qicloading ({remove:true});//Remove Loading ...
Return
}
$ ("#selectL option"). Remove ();
for (var i = 0; i < data.length; i++) {
var id = data[i]._1;
var name = data[i]._2;
var account = Data[i]._3;
var option = $ ("<option param_id= '" + ID + "' param_name= '" + name + "' param_account= '" + account + "' style= ' cursor: Pointer ' ></option> ')
. Append (name). Append ("" +account);
Select.append (option);
}
}
});
$.qicloading ({remove:true});//Remove Loading ...
}
});
$ (". Set_user_i_2"). Live (' KeyPress ', function (event) {
var keycode = Event.which;
Text Box Contents
var condition = $ (". Set_user_i_2"). Val ();
The currently selected role ID
var rid = $ (". Current"). attr ("id"). substring ("ut_". length);
if (keycode = = 13) {
Show loading before loading data ...
$.qicloading ({
Target: ' Body ',
Text: "Trying to load ...",
Modal:true,
width:180,
Top: ' 300px ',
Left: ' 770px ',
Postion: "Absolute",
zindex:2000
});
$.ajax ({
Url:getRoleUserRount.url (),
Data:{condition:condition, Roleid:rid},
Type: "Get",
DataType: "JSON",
Success:function (data) {
var select = $ ("#selectR");
if (Data.length = = 0) {
$ ("#selectR option"). Remove ();
var option = $ ("<option style= ' color: #f6a828; ' default_value= ' Noresult ' ></option>")
. Append (' No matching query results ')
Select.append (option);
$.qicloading ({remove:true});//Remove Loading ...
Return
}
/* $ (". tr_checked"). each (function () {
$ (this). Remove ();
});*/
$ ("#selectR option"). Remove ();
for (var i = 0; i < data.length; i++) {
var id = data[i]._1;
var name = data[i]._2;
var account = Data[i]._3;
var option = $ ("<option param_id= '" + ID + "' param_name= '" + name + "' param_account= '" + account + "' style= ' cursor: Pointer ' ></option> ')
. Append (name). Append ("" +account);
Select.append (option);
}
}
});
$.qicloading ({remove:true});//Remove Loading ...
}
});
<!--to display the query results in the list entry end-->
<!--click "OK" button to submit the user conversion role (background) bigen-->
$ (function () {
$ ("#submit_change"). Live (' click ', function () {
var form = $ ("#changeRoleForm");
var Urid = [user ID array in];//role user list
var uid = [];//User ID array in user list]
The currently selected role ID
var rid = $ (". Current"). attr ("id"). substring ("ut_". length);
$ ("#selectL option"). each (function () {
if ($ (this). attr ("param_id")!= undefined) {
Uid.push ($ (this). attr ("param_id"));
}
Console.log (UID);
});
$ ("#selectR option"). each (function () {
if ($ (this). attr ("param_id")!= undefined) {
Urid.push ($ (this). attr ("param_id"));
}
Console.log (Urid);
});
Show loading before loading data ...
$.qicloading ({
Target: ' Body ',
Text: "Trying to load ...",
Modal:true,
width:180,
Top: ' 50% ',
Left: ' 50% ',
Postion: "Absolute",
zindex:2000
});
$.ajax ({
Url:changeUserRoleRount.url (),
Data:form.serialize () + "&urid=" + Urid + "&uids=" + uid + "&rid=" + RID,
Type: "Post",
DataType: "JSON",
Success:function (data) {
if (Data.flag) {
$.qictips ({message:data.msg, level:1, Target: ' #submit_change ', mleft:0, mtop:-60});
} else {
$.qictips ({message:data.msg, level:2, Target: ' #submit_change ', mleft:0, mtop:-60});
}
}
});
$.qicloading ({remove:true});//Remove Loading ...
});
});
<!--click "OK" button to submit the user conversion role (background) end-->
Click the Cancel button to close the dialog box
$ (function () {
$ ("#cancel_change"). Live (' click ', function () {
$ (". Set_user_list"). Dialog ("Close");
});
});
Click "Reset" to restore
$ ("#reset_change"). Live (' click ', function () {
var rid = $ (". Current"). attr ("id"). substring ("ut_". length);
Changeroledialog (Changeroleroute.url (), {Id:rid}, ". Set_user_list");
});
});
Do not have a good place please give us a lot of advice!
