两个listbox实现选项的添加删除和搜索


Posted in Javascript onMarch 01, 2013

两个listbox实现选项的添加,删除和搜索

贴一下主要的js代码,一些资源我就不传了。下面是效果图。

两个listbox实现选项的添加删除和搜索

两个listbox实现选项的添加删除和搜索

两个listbox实现选项的添加删除和搜索

两个listbox实现选项的添加删除和搜索

group.js

function addMember() 
{ 
//右侧选中的项添加到左侧 
var add=$("#newAddMembersId").val(); 
var del=$("#deleteMembersId").val(); 
var ext=$("#existedMemberId").val(); 
var newAddId=""; 
//获取新加的userId 
var addedUsers=$("#enterpriseMember input:checkbox[checked]"); 
for(var i=0;i<addedUsers.length;i++) 
{ 
var checkbox=$(addedUsers[i]); 
var uid=checkbox.next().val(); 
if(add.indexOf(uid)>=0 || (ext.indexOf(uid)>=0 && del.indexOf(uid)<0)) 
{ 
continue; 
} 
if(!(ext.indexOf(uid)>=0 && del.indexOf(uid)>=0)) 
{ 
if(add.indexOf(uid)<0) 
{ 
if(add.length==0) 
add+=uid; 
else 
add+=","+uid; 
} 
} 
//添加数据到左侧列表 
checkbox.removeAttr("checked"); 
var userDiv=checkbox.parent().parent().parent(); 
$("#groupMember").append(userDiv.clone()); 
del=del.replace(uid+",",""); 
del=del.replace(uid,""); 
$("#deleteMembersId").val(del); } 
$("#newAddMembersId").val(add); 
} 
function removeMember() 
{ 
//左侧移除成员 
var add=$("#newAddMembersId").val(); 
var del=$("#deleteMembersId").val(); 
var newRemoveId=""; 
var removedUsers=$("#groupMember input:checkbox[checked]"); 
for(var i=0;i<removedUsers.length;i++) 
{ 
var checkbox=$(removedUsers[i]); 
var uid=checkbox.next().val(); 
if(del.indexOf(uid)>=0) 
{ 
continue; 
} 
if(del.indexOf(uid)<0) 
{ 
if(del.length==0) 
del+=uid; 
else 
del+=","+uid; 
} 
//左侧列表中移除数据 
checkbox.removeAttr("checked"); 
var userDiv=checkbox.parent().parent().parent(); 
userDiv.remove(); 
//$("#enterpriseMember").append(userDiv); 
add=add.replace(uid + ",", ""); 
add=add.replace(uid, ""); 
$("#newAddMembersId").val(add); 
} 
$("#deleteMembersId").val(del); 
} 
//搜索成员,按名字,按部门 
function searchMember() 
{ 
var searchTxt=$.trim($("#searchTxt").val()); 
var memberLIsts=$(".dmlist"); 
//移除上次的结果 
var lastReusts=$(".tempResult"); 
for(var i=0;i<lastReusts.length;i++) 
{ 
$(lastReusts[i]).remove(); 
} 
//为空搜索显示全部列表 
if(searchTxt=="" || searchTxt=="搜索企业成员") 
{ 
//show all hidded ml 
for(var i=0;i<memberLIsts.length;i++) 
{ 
$(memberLIsts[i]).css("display",""); 
} 
return ; 
} 
//hide all memberlist,隐藏所有的列表 
for(var i=0;i<memberLIsts.length;i++) 
{ 
$(memberLIsts[i]).css("display","none"); 
} 
//搜索------------- 
var enterpriseMemberDiv=$("#enterpriseMember"); 
//search by name,add class:tempResult 
var names=$(".sname"); 
for(var i=0;i<names.length;i++) 
{ 
var name=$(names[i]).text(); 
if(name.indexOf(searchTxt)>=0) 
{ 
var result=$(names[i]).parent().parent().parent().clone(); 
result.addClass("tempResult"); 
result.css("display",""); 
enterpriseMemberDiv.append(result); 
} 
} 
//search by departmentName 
var departmentNames=$(".sdepartment"); 
for(var i=0;i<departmentNames.length;i++) 
{ 
var name=$(departmentNames[i]).text(); 
if(name.indexOf(searchTxt)>=0) 
{ 
var result=$(departmentNames[i]).parent().parent().parent().clone(); 
result.addClass("tempResult"); 
result.css("display",""); 
enterpriseMemberDiv.append(result); 
} 
} 
} 
function clearTxt() 
{ 
var txt=$.trim($("#searchTxt").val()); 
if(txt=="搜索企业成员") 
$("#searchTxt").val(""); 
} 
function setsearchTxt() 
{ 
var txt=$.trim($("#searchTxt").val()); 
if(txt=="") 
$("#searchTxt").val("搜索企业成员"); 
} 
//展开折叠器 
function folderToggle(event,basePath) 
{ 
var evnet=event||window.event; 
var arrowDiv=event.target||event.srcElement; 
var closeimg=basePath+"/images/folder_close.PNG"; 
var openimg=basePath+"/images/folder_open.PNG"; 
var srcval=$(arrowDiv).attr("src"); 
if(srcval==closeimg) 
$(arrowDiv).attr("src",openimg); 
if(srcval==openimg) 
$(arrowDiv).attr("src",closeimg); 
var listDiv=$(arrowDiv).parent().next().next().next(); 
listDiv.toggleClass("memberlist"); 
} 
//点击名字折叠 
function folderNameToggle(event,basePath) 
{ 
var evnet=event||window.event; 
var arrowDiv=event.target||event.srcElement; 
var closeimg=basePath+"/images/folder_close.PNG"; 
var openimg=basePath+"/images/folder_open.PNG"; 
var srcval=$(arrowDiv).attr("src"); 
if(srcval==closeimg) 
$(arrowDiv).attr("src",openimg); 
if(srcval==openimg) 
$(arrowDiv).attr("src",closeimg); 
var listDiv=$(arrowDiv).parent().next().next(); 
listDiv.toggleClass("memberlist"); 
} 
function folderNumToggle(event,basePath) 
{ 
var evnet=event||window.event; 
var arrowDiv=event.target||event.srcElement; 
var closeimg=basePath+"/images/folder_close.PNG"; 
var openimg=basePath+"/images/folder_open.PNG"; 
var srcval=$(arrowDiv).attr("src"); 
if(srcval==closeimg) 
$(arrowDiv).attr("src",openimg); 
if(srcval==openimg) 
$(arrowDiv).attr("src",closeimg); 
var listDiv=$(arrowDiv).parent().parent().next().next(); 
listDiv.toggleClass("memberlist"); 
} 

function setCss(event,onoff) 
{ 
var theclass=$.trim(onoff); 
var offclass="addmemberBtnoff"; 
var onclass="addmemberBtnon"; 
var event=event||window.event; 
var thisbtn=event.target||event.srcElement; 
$(thisbtn).removeClass(onclass); 
$(thisbtn).removeClass(offclass); 
if(theclass=="on") 
{ 
$(thisbtn).addClass(onclass); 
} 
else 
{ 
$(thisbtn).addClass(offclass); 
} 
}

test.jsp 
<%@ page language="java" pageEncoding="UTF-8"%> 
<%@ include file="/pages/common/Taglibs.jsp"%> 
<%@ include file="/pages/common/Header.jsp"%> <!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="Content-Type" content="text/html; charset=gb2312" /> 
<title>添加群组成员</title> 
<script type="text/javascript" src="<%=basePath%>/script/group.js"></script> 
<script type="text/javascript"> 
$(document).keydown(function (event){ 
if(event && event.keyCode==13){ 
$("#searchBtn").click(); 
} 
}); 
function backpage(group_id){ 
//window.history.back(); 
window.location.href="<%=basePath%>/server/group?group_id="+group_id; 
} 
function closeWin() 
{ 
this.close(); 
} 
function saveChanges() { 
function okFun() { 
var deleteMembersId = $("#deleteMembersId").val(); 
var newAddMembersId = $("#newAddMembersId").val(); 
var group_id = $("#group_id").val(); 
window.location.href = "<%=basePath%>/server/group!saveGroupMember?group_id=" 
+ group_id 
+ "&newAddMembersId=" 
+ newAddMembersId 
+ "&deleteMembersId=" + deleteMembersId; 
}; 
function cancelFun() { 
}; 
//PopuMsgBox("确认提示","是否保存?",okFun,cancelFun,150,100); 
okFun(); 
} 
</script> 
</head> 
<body class="bgClass"> 
<div id="addGroupMembercontainer" style="padding:20px 40px;width:auto;height:auto;"> 
<div class="roundGroup" style="float:left;width:241px;height:380px;"> 
<div style="margin-bottom:5px;margin-top:10px;padding-right:2px;"> 
<span class="spangrouptitle" style="line-height:16px;color:#404754;font-weight:bold;font-size:13px;"> 群组<s:property value="group_name"></s:property> </span> 
<span id="menberCount" style="color:#838a97;"> ${gNumber}人</span><br/> 
<hr style="border: 1px dotted #C0D3DC"/> 
</div> 
<div id="groupMember" style="margin-right:8px;height:306px;overflow-y:auto;overflow-x:hidden;width:237px;"> 
<!-- 内容列表 --> 
<s:if test="#request.groupMemberList!=null && #request.groupMemberList.size!=0"> 
<s:iterator value="#request.groupMemberList" id="gmember"> 
<div style="padding-left:5px;padding-right:1px;"> 
<div style="height:16px;" onclick="toggleCheck(event);"> 
<div style="width:auto;float:left;"> 
<input type="checkbox" /> 
<input type="hidden" value="<s:property value="#gmember.id"/>" name="userId" /> 
<span style="color:#404754;"><s:property value="#gmember.name" /></span> 
</div> 
<div class="positionblue" style="float:right;width:auto;text-align:right;"> 
<span style="color:#838a97;"><s:property value="#gmember.position_name" /></span> 
</div> 
</div> 
<div style="clear:left;"></div> 
</div> 
</s:iterator> 
</s:if> 
</div> 
</div> 
<div style="float:left;width:80px;padding-top:150px;text-align:center;"> 
<div style="height: auto;"> 
<input class="addmemberBtn addmemberBtnon" onmouseover="setCss(event,'on')" onmouseout="setCss(event,'off')" type="button" value="<<添加" onclick="addMember()" /> 
</div> 
<br/> 
<div style="height:auto;"> 
<input class="addmemberBtn addmemberBtnon" onmouseover="setCss(event,'on')" onmouseout="setCss(event,'off')" type="button" value="移除>>" onclick="removeMember()" /> 
</div> 
</div> 
<div class="roundGroup" style="float:left;width:241px;height:380px;"> 
<div style="margin-bottom:5px;margin-top:10px;padding-right:2px;"> 
<span class="spangrouptitle" style="color:#404754;font-weight:bold;font-size:13px;"> 所有企业成员</span> 
<span style="color:#838a97;"> ${eNumber}人</span><br/> 
<hr style="border: 1px dotted #C0D3DC" /> 
</div> 
<div style="height:30px;padding-left:5px;"> 
<div style="height:14px;float:left;"><input id="searchTxt" style="width:215px;line-height:14px;color:#838a97;" type="text" value="搜索企业成员" onfocus="clearTxt()" onblur="setsearchTxt()"/></div> 
<div style="height:14px;float:left;margin-top:4px;"><img id="searchBtn" onclick="searchMember();" style="width:14px;height:14px;cursor:pointer;" src="<%=basePath%>/images/searchBtn.PNG"/></div> 
<div style="clear:both;"></div> 
</div> 
<div id="enterpriseMember" style="height:280px;overflow-y:auto;overflow-x:hidden;width:233px;"> 
<!-- 内容列表 --> 
<s:if test="#request.departmentMemberList!=null && #request.departmentMemberList.size!=0"> 
<s:iterator value="#request.departmentMemberList" id="department"> 
<div class="dmlist" style="padding-bottom:2px;"> 
<div style="float:left;height:13px;padding-top:0px;"><img class="folder" style="" src="<%=basePath%>/images/folder_close.PNG" onclick="folderToggle(event,'<%=basePath%>')"/></div> 
<div style="float:left;height:13px;"><span style="cursor:pointer;" onclick="folderNameToggle(event,'<%=basePath%>')"><s:property value="#department.departmentName"/><span style="color:#838a97;" onclick="folderNumToggle(event,'<%=basePath%>')"> <s:property value="#department.memberCount"/>人</span></span></div> 
<div style="clear:both;"></div> 
<div class="ml memberlist"> 
<s:iterator value="#department.memberList" id="emember"> 
<div style="padding-left:5px;padding-right:1px;"> 
<div style="height:16px;"> 
<div style="float:left;"> 
<input type="checkbox"/> 
<input type="hidden" value="<s:property value="#emember.id"/>" name="userId" /> 
<span class="sname" style="color:#404754;"><s:property value="#emember.name" /></span> 
</div> 
<div class="positionblue" style="float:right;text-align:right;height:16px;"> 
<span class="sdepartment" style="color:#838a97;"><s:property value="#emember.position_name" /></span> 
</div> 
</div> 
<div style="clear:both;"></div> 
</div> 
</s:iterator> 
</div> 
</div> 
</s:iterator> 
</s:if> 
</div> 
</div> 
<div style="clear:both;width:600px;"> 
<div style="text-align:right;"> 
<input class="commonButton" style="" type="button" value="保存" onclick="saveChanges()"/> 
<input type="hidden" id="newAddMembersId" name="newAddMembersId" value=""/> 
<input type="hidden" id="deleteMembersId" name="deleteMembersId" value=""/> 
<input type="hidden" id="existedMemberId" name="existedMemberId" value="${existedMemberId}"/> 
<input type="hidden" id="group_id" name="group_id" value="${group_id}"/> 
</div> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
DWZ table的原生分页浅谈
Mar 01 #Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 #Javascript
循环 vs 递归浅谈
Feb 28 #Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 #Javascript
jquery显示和隐藏div特效实例
Feb 27 #Javascript
JS等比例缩小图片尺寸的实例
Feb 27 #Javascript
JQuery切换显示的效果实例代码
Feb 27 #Javascript
You might like
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
javascript折半查找详解
2015/01/26 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
scrapy爬虫实例分享
2017/12/28 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
技校毕业生自荐书
2014/05/23 职场文书
个人廉政承诺书
2015/04/28 职场文书
运动员代表致辞
2015/07/29 职场文书