Add, delete, and search two listbox Implementation Options

Add, delete, and search two listbox Implementation Options

Paste the main js Code and I will not upload some resources. Below is.

Group. js
Copy codeThe Code is as follows:
Function addMember ()
{
// Add the selected items on the right to the left
Var add = $ ("# newAddMembersId"). val ();
Var del = $ ("# deleteMembersId"). val ();
Var ext = $ ("# existedMemberId"). val ();
Var newAddId = "";
// Obtain the newly added 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;
}
}
// Add data to the left-side list
Checkbox. removeAttr ("checked ");
Var userDiv = checkbox. parent ();
$ ("# GroupMember"). append (userDiv. clone ());
Del = del. replace (uid + ",","");
Del = del. replace (uid ,"");
$ ("# DeleteMembersId"). val (del );

}

$ ("# NewAddMembersId"). val (add );

}

Function removeMember ()
{
// Remove a member from the left
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;
}
// Remove data from the list on the left
Checkbox. removeAttr ("checked ");
Var userDiv = checkbox. parent ();
UserDiv. remove ();
// $ ("# EnterpriseMember"). append (userDiv );
Add = add. replace (uid + ",","");
Add = add. replace (uid ,"");
$ ("# NewAddMembersId"). val (add );

}

$ ("# DeleteMembersId"). val (del );
}
// Search for members by name and Department
Function searchMember ()
{

Var searchTxt = $. trim ($ ("# searchTxt"). val ());
Var memberLIsts = $ (". dmlist ");
// Remove the last result
Var lastReusts = $ (". tempResult ");
For (var I = 0; I <lastReusts. length; I ++)
{
$ (LastReusts [I]). remove ();
}
// Empty search to display all lists
If (searchTxt = "" | searchTxt = "Search enterprise member ")
{
// Show all hidded ml
For (var I = 0; I <memberLIsts. length; I ++)
{
Certificate (memberlistspoliciuncs.css ("display ","");
}
Return;
}
// Hide all memberlist to hide all lists
For (var I = 0; I <memberLIsts. length; I ++)
{
Certificate (memberlistspoliciuncs.css ("display", "none ");
}
// Search -------------
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 (). 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 (). clone ();
Result. addClass ("tempResult ");
Result.css ("display ","");
EnterpriseMemberDiv. append (result );
}
}
}

Function clearTxt ()
{
Var txt = $. trim ($ ("# searchTxt"). val ());
If (txt = "Search for enterprise members ")
$ ("# SearchTxt"). val ("");

}
Function setsearchTxt ()
{
Var txt = $. trim ($ ("# searchTxt"). val ());
If (txt = "")
$ ("# SearchTxt"). val ("Search enterprise member ");

}
// Expand the folder
Function folderToggle (event, basePath)
{
Var evnet = event | window. event;
Var arrowdiv1_event.tar get | 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 ();
ListDiv. toggleClass ("memberlist ");

}
// Click the name to fold
Function folderNameToggle (event, basePath)
{
Var evnet = event | window. event;
Var arrowdiv1_event.tar get | 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 arrowdiv1_event.tar get | 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 thisbtn1_event.tar get | event. srcElement;
$ (Thisbtn). removeClass (onclass );
$ (Thisbtn). removeClass (offclass );
If (theclass = "on ")
{
$ (Thisbtn). addClass (onclass );
}
Else
{
$ (Thisbtn). addClass (offclass );
}

}



Test. jsp 
Copy codeThe Code is as follows:
<% @ 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> Add a group member </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 deletememembersid = $ ("# 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 ("OK", "Save? ", 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: pixel PX;">
<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;"> group <s: property value = "group_name"> </s: property> </span>
<Span id = "menberCount" style = "color: #838a97;" >$ {gNumber} People </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;">
<! -- Content list -->
<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 =" <Add "onclick =" addMember () "/>
</Div>
<Br/>
<Div style = "height: auto;">
<Input class = "addmemberBtn addmemberBtnon" onmouseover = "setCss (event, 'on')" onmouseout = "setCss (event, 'off ') "type =" button "value =" Remove> "onclick =" removeMember () "/>
</Div>
</Div>
<Div class = "roundGroup" style = "float: left; width: 241px; height: pixel PX;">
<Div style = "margin-bottom: 5px; margin-top: 10px; padding-right: 2px;">
<Span class = "spangrouptitle" style = "color: #404754; font-weight: bold; font-size: 13px;"> All enterprise members </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 =" Search for enterprise members "onfocus =" clearTxt () "onblur =" setsearchTxt () "/> </div>
<Div style = "height: 14px; float: left; margin-top: 4px;"> /images/searchBtn. PNG "/> </div>
<Div style = "clear: both;"> </div>
</Div>
<Div id = "enterpriseMember" style = "height: 280px; overflow-y: auto; overflow-x: hidden; width: 233px;">
<! -- Content list -->
<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; "> /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 "/> People </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 = "save" 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>