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

　　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);

　　}

　　}

　　<%@ 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>