我的双向选择器支持批量修改角色，支持关键字查询角色信息。下面奉上源码：
html页面：
复制代码 代码如下:
用户列表
姓名 账号
#{list items:activeduserlist,as :'items'}
#{emvf items.name/} #{emvf items.account/}
#{/list}
> class=common_blue id=addthisrole>
角色用户列表
姓名 账号
#{list items: rolelist,as :'items'}
#{emvf items.name/} #{emvf items.account/}
#{/list}
下面是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 = $()
.append('没有匹配的查询结果')
select.append(option);
$.qicloading({remove:true});//移除loading。。。
return;
}
$(#selectl option).remove();
for (var i = 0; i var id = data[i]._1;
var name = data[i]._2;
var account = data[i]._3;
var 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 = $()
.append('没有匹配的查询结果')
select.append(option);
$.qicloading({remove:true});//移除loading。。。
return;
}
/* $(.tr_checked).each(function(){
$(this).remove();
});*/
$(#selectr option).remove();
for (var i = 0; i var id = data[i]._1;
var name = data[i]._2;
var account = data[i]._3;
var option = $()
.append(name).append( +account);
select.append(option);
}
}
});
$.qicloading({remove:true});//移除loading。。。
}
});
$(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。。。
});
});
//点击”取消“按钮 关闭对话框
$(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);
});
});
做的不好的地方请大家多多指教！