_javascript スキルを追加、削除、検索するための 2 つのリストボックス実装オプション-jsチュートリアル-php.cn

追加、削除、検索のための 2 つのリストボックス実装オプション

メインの 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{ 
var checkbox =$ (addedUsers[i]); 
var uid=checkbox.next().val(); 
if(add.indexOf(uid)>=0 || (ext.indexOf(uid)> ;= 0 && del.indexOf(uid){ 
続行; 
} 
if(!(ext.indexOf(uid)>=0 && del.indexOf( uid) >=0)) 
{ 
if(add.indexOf(uid){ 
if(add.length==0) 
add =uid; 
else 
add ="," uid; 
} 
} 
// 左側のリストにデータを追加します
checkbox.removeAttr("checked"); =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 selectedUsers=$("#groupMember input: 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) )
{ 
if(del.length==0) 
del =uid; 
else 
del =", 
} 
/ /left サイドリストからデータを削除します 
checkbox.removeAttr("checked"); 
var userDiv=checkbox.parent().parent().parent(); 🎜> //$("#enterpriseMember").append(userDiv); 
add=add.replace(uid ",", ""); 
add=add.replace(uid, ""); 
$("#newAddMembersId").val(add); 

} 

$("#deleteMembersId").val(del); /メンバーを名前別、部門別に検索 
function searchMember() 
{ 

var searchTxt=$.trim($("#searchTxt").val()); 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"); 
//名前で検索し、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); 
} 
} 

// 部門名で検索 
var 部門名=$( " .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",""); 
} 
} 

 function clearTxt() 
{ 
var txt=$.trim($("#searchTxt").val()); 
if(txt=="エンタープライズ メンバーの検索") 
$ ( "#searchTxt").val(""); 

} 
関数 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;画像/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; closeimg =basePath "/images/folder_close.PNG"; 
var openimg=basePath "/images/folder_open.PNG"; 
var srcval=$(arrowDiv).attr("src"); ( srcval==closeimg) 
$(arrowDiv).attr("src",openimg); 
if(srcval==openimg) 
$(arrowDiv).attr("src",closeimg); 

var listDiv=$(arrowDiv).parent().next().next(); 
listDiv.toggleClass("memberlist");

関数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("メンバーリスト"); 

} 


function setCss(event,onoff) 
{ 
var theclass=$.trim(onoff); 
var offclass="addmemberBtnoff"; 
var onclass="addmemberBtnon"; 
var イベント=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); 
} 

} 