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

记得之前发表过一篇《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">
<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");
});
});

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

时间： 2024-09-27 02:41:58

jquery 列表双向选择器之改进版_jquery的相关文章

jquery制作select列表双向选择示例代码_jquery

jquery制作的select列表双向选择,兼容性肯定是不错的,需要的朋友可以学习下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"&

JQuery 学习笔记 选择器之二_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

jquery制作select列表双向选择

     做项目的时候要用到的一个小功能,以前做过的,用的纯JS,今天翻出来看发现只能在IE中运行的,自己改成jquery的了,该功能很常见,不过一直不知道他的学名叫什么,所以也就随便起个了,大家看下面的图都应该知道了: 下面是整个网站的HTML代码,用的时候记得导入jquery就行了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

基于jQuery的日期选择控件_jquery

但是也有些问题,第一画日历有点慢,第二兼容性不太好IE Only,第三它不是基于jQuery的哈哈. 那还是老规矩,做之前先看下效果   这下是更酷的Ext风格了. 从上图我们可以看出这个控件其实有两个视图一个日期月视图,还有一个是年月选择视图. 1:还是先从HTML入手 日期控件确定HTML其实还是比较简单,因为明摆着是列表的数据格式,当然主要是采用table了. 两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了.完整的HTMl结构大家可以用IEDeveloper看一下Dem

jQuery列表拖动排列具体实现_jquery

  实现这个很简单 第一,导入JS,jquery.dragsort.js,jquery.dragsort-0.4.min.js,jquery-1.4.2.min.js. 第二,代码 复制代码 代码如下: <h2>两组列表拖放:</h2> <ul class="dragsort" id="list2" style="float:right;"> <li><div>10</div>

jQuery自制提示框tooltip改进版_jquery

自带的title的提示效果的响应速度是非常缓慢的,使用jQuery自制提示tooltip! HTML: <p><a href="#" title="超链接提示1" class="tooltip">提示1</a></p> <p><a href="#" title="超链接提示2" class="tooltip">提示2

JQuery跨Iframe选择实现代码_jquery

从父页面中选择iframe中的元素: 复制代码 代码如下: $('#btnCancel',$('#PopFrame')[0].contentWindow.document) 从iframe页面中选择父页面中的元素: 复制代码 代码如下: $("#PopContainer",parent.document) 以下内容是别的网友的解决方法:只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮 $(window.frames["if

JQuery Tab选项卡效果代码改进版_jquery

介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. 在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用. 现在,我把代码贴上,与众博友共享 这是js脚本 复制代码 代码如下: /* jque

jQuery getJSON()+.ashx 实现分页(改进版)_jquery

参考了:http://www.jb51.net/article/35110.htm改进的地方: 1.ashx返回json数据,减少传输数据量,html页面样式控制也比较灵活: 2.改写html页的jQuery代码: 3.把3个ashx文件简化为1个. 一.创建表的测试数据: 复制代码 代码如下: create table test(id int identity,title varchar(36)) declare @index int; set @index = 1; while(@index