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 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
28个JS验证函数收集
Mar 02 Javascript
js获取checkbox值的方法
Jan 28 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
react使用CSS实现react动画功能示例
May 18 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中单双引号的区别详解
2016/06/12 PHP
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
python对url格式解析的方法
2015/05/13 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python中常见的数据类型小结
2015/08/29 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
大学生通用个人自我评价
2014/04/27 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
如何撰写创业策划书
2019/06/27 职场文书
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS