两个listbox实现选项的添加，删除和搜索
贴一下主要的js代码，一些资源我就不传了。下面是效果图。
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;auto;height:auto;"> <div class="roundGroup" style="float:left;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;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="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;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;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;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="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="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;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;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>