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

两个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;">&nbsp;群组<s:property value="group_name"></s:property>    </span>
<span id="menberCount" style="color:#838a97;">&nbsp;${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="&lt;&lt;添加" onclick="addMember()" />
</div>
<br/>
<div style="height:auto;">
<input class="addmemberBtn addmemberBtnon" onmouseover="setCss(event,'on')" onmouseout="setCss(event,'off')" type="button" value="移除&gt;&gt;" 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;">&nbsp;所有企业成员</span>
<span style="color:#838a97;">&nbsp;${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%>')">&nbsp;<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>