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 相关文章推荐
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
简单实现js倒计时功能
Feb 13 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
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防CC攻击实现代码
2011/12/29 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
js实现聊天对话框
2020/02/08 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python文件处理
2016/02/29 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
高中生学习的自我评价
2013/12/14 职场文书
小学少先队活动方案
2014/02/18 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
《风筝》教学反思
2014/04/10 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
党支部先进事迹材料
2014/12/24 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
解除处分决定书
2015/06/25 职场文书
宾馆安全管理制度
2015/08/06 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Android 中的类文件和类加载器详情
2022/06/05 Java/Android
Redis实现分布式锁的五种方法详解
2022/06/14 Redis