jquery 列表双向选择器之改进版


Posted in Javascript onAugust 09, 2013

记得之前发表过一篇《Jquery简单应用总结》,最后有一个自己做的列表双向选择器,感觉有点挫,昨天闲着没事改进了一下,把元素改成了select option这样就支持shift多选,代码量也精简了些。
jquery 列表双向选择器之改进版 
jquery 列表双向选择器之改进版
我的双向选择器支持批量修改角色,支持关键字查询角色信息。下面奉上源码:
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"> 
<input type="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"); 
}); 
});

做的不好的地方请大家多多指教!
Javascript 相关文章推荐
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
Java中Timer的用法详解
Oct 21 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
jquery 简单应用示例总结
Aug 09 #Javascript
JS命名空间的另一种实现
Aug 09 #Javascript
使用javascript创建快捷方式的简单实例
Aug 09 #Javascript
使用js修改客户端注册表的方法
Aug 09 #Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 #Javascript
jQuery :first选择器使用介绍
Aug 09 #Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 #Javascript
You might like
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
js的event详解。
2006/09/06 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
深入浅析vue中cross-env的使用
2019/09/12 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
高中军训感想800字
2014/02/23 职场文书
周年庆典主持词
2014/04/02 职场文书
初中家长评语大全
2014/12/26 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
邀请函样本
2015/02/02 职场文书
小班上学期个人总结
2015/02/12 职场文书
通知的格式范文
2015/04/27 职场文书
联村联户简报
2015/07/21 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
防止web项目中的SQL注入
2021/12/06 MySQL