jquery 列表双向选择器之改进版 - Web前端

记得之前发表过一篇《JQuery简单应用总结》，最后有一个自己做的列表双向选择器，感觉有点挫，昨天闲着没事改进了一下，把元素改成了select option这样就支持shift多选，代码量也精简了些。
 

我的双向选择器支持批量修改角色，支持关键字查询角色信息。下面奉上源码：
html页面：
复制代码 代码如下:
<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">
<h3 class="h3_title">
用户列表
</h3>
<p>  姓名      账号</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">
<inputtype="button" value="添加>>" class="common_blue" id="addthisRole">
<input type="button" value="删除<<" class="common_blue" id="deleteThisRole">
</div>
</div>
<div class="belong_role_list">
<h3 class="h3_title">
角色用户列表
</h3>
<p>  姓名      账号</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="请输入姓名/账号">
<input type="text" class="set_user_i_2" value="请输入姓名/账号" >
</div>
</div>


<div class="common_btn" style="position:relative;">
<input type="button" value="重置" class="common_blue" id="reset_change">
<input type="button" value="取消" class="common_blue common_cancle" id="cancel_change">
<input type="button" value="确定" class="common_blue" id="submit_change">
</div>
<input type="hidden" id="r_showloading" value="true"/>
</Form>

下面是js代码：
复制代码 代码如下:
//加载用户列表，角色用户列表
function changeroleDialog(url, parameters, renderContAIner) {
//加载数据之前 显示loading。。。
$.qicLoading({
target:'body',
text:"努力加载中...",
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});//移除loading。。。
}
$(function () {
var leftSel = $("#selectL");
var rightSel = $("#selectR");
//点击 加载用户列表，角色用户列表
$(".add_remove_user").live('click', function () {
var rid = $(".current").attr("id").substring("ut_".length);
changeroleDialog(changeroleRoute.url(), {id:rid}, ".set_user_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");
});
});
//########单击"添加/删除"切换列表 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########//
//########鼠标按下 取消文本框提示消息 并聚焦 begin########//
$(function () {
$(".set_user_i").live('mousedown', function () {
if ($(".set_user_i").val() == '请输入姓名/账号') {
$(".set_user_i").val("");
$(".set_user_i").focus;
}
});
$(".set_user_i_2").live('mousedown', function () {
if ($(".set_user_i_2").val() == '请输入姓名/账号') {
$(".set_user_i_2").val("");
$(".set_user_i_2").focus;
}
})
})
//####### 鼠标按下 取消文本框提示消息 并聚焦 end #######
//--在用户列表输入内容 按enter 显示查询结果 begin----//
$(".set_user_i").live('keypress', function (event) {
var keycode = event.which;
var condition = $(".set_user_i").val();
if (keycode == 13) {
//加载数据之前 显示loading。。。
$.qicLoading({
target:'body',
text:"努力加载中...",
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('没有匹配的查询结果')
select.APPend(option);
$.qicLoading({remove:true});//移除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});//移除loading。。。
}
});
$(".set_user_i_2").live('keypress', function (event) {
var keycode = event.which;
// 文本框内容
var condition = $(".set_user_i_2").val();
//当前选中的角色ID
var rid = $(".current").attr("id").subString("ut_".length);
if (keycode == 13) {
//加载数据之前 显示loading。。。
$.qicLoading({
target:'body',
text:"努力加载中...",
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('没有匹配的查询结果')
select.append(option);
$.qicLoading({remove:true});//移除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});//移除loading。。。
}
});
<!--在列表输入内容 按enter 显示查询结果 end-->
<!--点击”确定“按钮提交 用户转换角色(后台) bigen-->
$(function () {
$("#submit_change").live('click', function () {
var form = $("#changeRoleForm");
var urid = [];//角色用户列表中用户ID数组
var uid = [];//用户列表中用户ID数组
//当前选中的角色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);
});
//加载数据之前 显示loading。。。
$.qicLoading({
target:'body',
text:"努力加载中...",
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});//移除loading。。。
});
});
<!--点击”确定“按钮提交 用户转换角色(后台) end-->
//点击”取消“按钮 关闭对话框
$(function () {
$("#cancel_change").live('click', function () {
$(".set_user_list").dialog("close");
});
});
//点击“重置” 还原
$("#reset_change").live('click', function () {
var rid = $(".current").attr("id").substring("ut_".length);
changeroleDialog(changeroleRoute.url(), {id:rid}, ".set_user_list");
});
});

做的不好的地方请大家多多指教！

标签：双向改进版选择器列表Webjquery