_javascript 기술을 추가, 삭제 및 검색하기 위한 두 가지 목록 상자 구현 옵션

추가, 삭제, 검색을 위한 두 가지 목록 상자 구현 옵션

기본 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))
{
계속
}
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 RemovalUsers=$("#groupMember 입력: checkbox[checked]");
for(var i=0;i{
var checkbox=$(removedUsers[i]);
var uid =checkbox .next().val();
if(del.indexOf(uid)>=0)
{
계속
}
if(del.indexOf(uid) )< ;0)
{
if(del.length==0)
del =uid;
else
del ="," uid
}
/ /left 사이드 목록에서 데이터 제거
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[i]).remove();
}
//빈 검색에 대한 모든 목록 표시
if(searchTxt=="" || searchTxt== "기업 구성원 검색")
{
//숨겨진 ml 모두 표시
for(var i=0;i{
$(memberLIsts[i] ).css("display","");
}
return ;
}
//모든 구성원 목록 숨기기, 모든 목록 숨기기
for(var i=0;i< memberLIsts .length;i )
{
$(memberLIsts[i]).css("display","none")
}
//검색 -------- - ----
var enterpriseMemberDiv=$("#enterpriseMember");
//이름으로 검색, 클래스 추가: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);
}
}

//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)
}
}

functionclearTxt()
{
var txt=$.trim($("#searchTxt").val())
if(txt=="기업 구성원 검색")
$ ( "#searchTxt").val("");

}
function setsearchTxt()
{
var txt=$.trim($("#searchTxt").val ( ));
if(txt=="")
$("#searchTxt").val("회사 구성원 검색")

}
//폴더 확장
functionfolderToggle(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")

}
// 클릭 축소할 이름
functionfolderNameToggle(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")

}

함수 폴더NumToggle(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" />