Two listbox implementation options for adding, deleting and searching _javascript skills

Two listbox implementation options to add, delete and search

Post the main js code, I won’t upload some resources. Below is the rendering.

group.js

Copy code The code is as follows:

function addMember()
{
//The selected item on the right is added to the left
var add=$("#newAddMembersId").val();
var del=$("#deleteMembersId").val();
var ext=$("#existedMemberId").val();
var newAddId="";
//Get the newly added userId
var addedUsers=$("#enterpriseMember input:checkbox[checked]");
for(var i=0;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 list
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()
{
//Remove members on the left
var add=$("#newAddMembersId ").val();
var del=$("#deleteMembersId").val();
var newRemoveId="";

var removedUsers=$("#groupMember input: checkbox[checked]");
for(var i=0;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;
}
//left Remove data from the side list
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);
}
//Search Members, by name, by department
function searchMember()
{

var searchTxt=$.trim($("#searchTxt").val());
var memberLIsts= $(".dmlist");
//Remove the last result
var lastReusts=$(".tempResult");
for(var i=0;i{
$(lastReusts[i]).remove();
}
//Display all lists for empty search
if(searchTxt=="" || searchTxt== "Search enterprise members")
{
//show all hidded ml
for(var i=0;i{
$(memberLIsts[i] ).css("display","");
}
return ;
}
//hide all memberlist, hide all lists
for(var i=0;i< memberLIsts.length;i )
{
$(memberLIsts[i]).css("display","none");
}
//Search -------- -----
var enterpriseMemberDiv=$("#enterpriseMember");
//search by name,add class:tempResult
var names=$(".sname");
for (var i=0;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{
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=="Search enterprise members")
$ ("#searchTxt").val("");

}
function setsearchTxt()
{
var txt=$.trim($("#searchTxt").val ());
if(txt=="")
$("#searchTxt").val("Search company members");

}
//Expand the folder
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");

}
// Click the name to collapse
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"%>

 群组
 ${gNumber}人

---

" name="userId" />

 所有企业成员
 ${eNumber}人

---

 人

" name="userId" />