ホームページ >ウェブフロントエンド >jsチュートリアル >_javascript スキルを追加、削除、検索するための 2 つのリストボックス実装オプション
_javascript スキルを追加、削除、検索するための 2 つのリストボックス実装オプション
- WBOYオリジナル
- 2016-05-16 17:41:091175ブラウズ
追加、削除、検索のための 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);
}
}
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" />
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。