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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
利用PM2部署node.js项目的方法教程
May 10 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
php二维数组排序详解
2013/11/06 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
理解Python中函数的参数
2015/04/27 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
OpenCV 边缘检测
2019/07/10 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python实现结构体代码实例
2020/02/10 Python
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
超市活动计划书
2014/04/24 职场文书
村党支部书记承诺书
2014/05/29 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
推广活动策划方案
2014/08/23 职场文书
导游词之吉林花园山
2019/10/17 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers