jqueryリスト双方向selector_jqueryの改良版

以前「Jqueryの簡単なアプリケーションまとめ」という記事を公開したのを思い出しましたが、昨日はちょっと悔しかったのでselectオプションに変更しました。シフト複数選択をサポートしているため、コード量も合理化されています。


私の双方向セレクターは、ロールのバッチ変更とロール情報のキーワード クエリをサポートしています。ソースコードは次のとおりです:
html ページ:

コードをコピー コードは次のとおりです:

>

ユーザーリスト

名前 アカウント番号

>#{リスト項目:activedUserList,as :'items'}
#{emVF items.name/} #{emVF items.account/}
#{/list}

< /div>

button" value= "追加>>" class="common_blue" id="addThisRole">

ロールユーザーlist

#{リスト項目: roleList,as :'items'}
#{emVF items.name/} #{emVF items.account/}
#{/list}
< / select>

次は JS コードです:




コードをコピーします

コードは次のとおりです:

//ユーザーリスト、ロールユーザーリストをロード
function changeroleDialog(url,parameters,renderContainer) {
//データをロードする前にロード中を表示します。 。 。
$.qicLoading({
target:'body',
text:"読み込み中...",
modal:true,
width:180,
top: ' 290px',
left:'450px',
postion:"absolute",
zIndex:2000
});
$.ajax({
url:url, data:parameters,
type:"GET",
dataType:"html",
success:function (html) {
$(renderContainer).html(html); (renderContainer).dialog({
autoOpen:true,
width:590,
modal:true,
resizable:false,
draggable:true
}); }
});
$.qicLoading({remove:true});//読み込みを削除します。 。 。
}
$(function () {
var leftSel = $("#selectL");
var rightSel = $("#selectR");
//クリックしてロードしますユーザーリスト , ロールユーザーリスト
$(".add_remove_user").live('click', function () {
var Rid = $(".current").attr("id").substring( "ut_ ".length);
changeroleRoute.url(), {id:rid}, ".set_user_list");
//#####「追加/」をクリック「リストの左右切り替えbegin########//
$("#addThisRole").live("click", function () {
$("#selectL オプション:選択済み"」) を削除します). each(function () {
$(this).remove().prependTo("#selectR");
});
$("#deleteThisRole") .live ("クリック", function () {
$("#selectR オプション:選択済み").each(function () {
$(this).remove().prependTo("#selectL") ;
});
});
//########[追加/削除] をクリックしてリッスンを切り替えます######//
/ /# #######ダブルクリック オプション スイッチ リスト begin########//
leftSel.live('dblclick', function () {
$(this).find ("オプション: 選択済み").each(function () {
$(this).remove().prependTo("#selectR");
}); .live(' dblclick', function () {
$(this).find("option:selected").each(function () {
$(this).remove().prependTo("# selectL");
});
});
//########オプションをダブルクリックしてリッスンを切り替えます#######//
//##### ###マウスをクリックしてテキスト ボックスのプロンプト メッセージをキャンセルし、begin に焦点を当てます########//
$(function () {
$(" .set_user_i").live('mousedown', function () {
if ($(".set_user_i").val() == '名前/アカウント番号を入力してください') {
$(" .set_user_i").val("");
$(".set_user_i").focus;
}
});
$(".set_user_i_2").live('mousedown' , function () {
if ($(" .set_user_i_2").val() == '名前/アカウント番号を入力してください') {
$(".set_user_i_2").val("") ;
$(".set_user_i_2").focus;
}
})
})
//##### マウスを押すと、テキスト ボックスのプロンプト メッセージがキャンセルされますそして、end #######
//-- ユーザーリストに内容を入力し、Enter キーを押してクエリ結果を表示します begin----//
$(".set_user_i")。 live('keypress', function (event) {
var keycode =event.that;
varcondition = $(".set_user_i").val();
if (keycode == 13) {
//データをロードする前にロードを表示します。 。 。
$.qicLoading({
target:'body',
text:"読み込み中...",
modal:true,
width:180,
top: ' 290px',
left:'450px',
postion:"absolute",
zIndex:2000
});
$.ajax({
url:getUserRount.url ( )、
data:{condition:condition}、
type:"GET"、
dataType:"json"、
success:function (data) {
var select = $( " #selectL");
if (data.length == 0) {
$("#selectL オプション").remove();
var オプション = $("")
.append('一致するクエリ結果がありません')
select.append(option);
$.qicLoading ({ Remove:true});//読み込みを削除します。
return;
$("#selectL option").remove();
for (var i = 0 ; i < data .length; i ) {
var id = data[i]._1;
var account = data[i]._3; = $("")
.append(名前 ).append(" " アカウント);
select.append(option);
$.qicLoading({remove:true });//積載物を取り除きます。 。 。
}
});
$(".set_user_i_2").live('keypress', function (event) {
var keycode = events.that;
// テキスト ボックスの内容
varcondition = $(".set_user_i_2").val();
//現在選択されているキャラクターID
varrid = $(".current").attr("id").substring ( "ut_".length);
if (keycode == 13) {
// ロード前にロードを表示します。
$.qicLoading({
target:'body',
text: "読み込み中です..."、
modal:true、
width:180、
top:'300px'、
left:'770px'、
postion: "absolute"、
zIndex:2000
});
$.ajax({
url:getRoleUserRount.url(),
data:{condition:condition, roleId:rid},
type: "GET",
dataType:"json",
success:function (data) {
var select = $("#selectR");
if (data.length == 0) {
$("#selectR オプション").remove();
var オプション = $("< ;/option>" )
.append('一致するクエリ結果はありません')
select.append(option);
$.qicLoading({remove:true});//読み込みを削除します。
return;
}
/* $(".tr_checked").each(function(){
$(this).remove();
});*/
$("#selectR オプション").remove();
for (var i = 0; i var id = data[i]._1; var name = data[i]._2;
var account = data[i]._3;
var option = $("")
.append(name).append(" " account);
select.append(option);
}
}
});
$.qicLoading({remove:true});//読み込みを削除します。 。 。
}
});


$(function () {
$("#submit_change").live('click', function () {
var form = $("#changeRoleForm") ;
var urid = [];//ロール ユーザー リスト内のユーザー ID の配列
var uid = [];//ユーザー リスト内のユーザー ID の配列
//現在選択されているロール ID
var Rid = $(".current").attr("id").substring("ut_".length);
$("#selectL option").each( function () {
if ($(this).attr("param_id") != 未定義) {
uid.push($(this).attr("param_id"));
}
console.log(uid);
});
$("#selectR オプション").each(function () {
if ($(this).attr("param_id") ! = 未定義) {
urid.push ($(this).attr("param_id"));
}
console.log(urid)
});データをロードする前にロードしています。 $.qicLoading({
target:'body',
text:"ロード中...",
modal:true,
width:180,
top :'50% ',
left:'50%',
postion:"absolute",
zIndex:2000
});
$.ajax({
url: changeUserRoleRount.url( )、
data:form.serialize() "&urid=" urid "&uids=" uid "&rid="rid、
type:"post"、
dataType:"json"、
success :function (data) {
if (data.flag) {
$.qicTips({message:data.msg, level:1, target:'#submit_change', mleft:0, mtop :-60} );
} else {
$.qicTips({message:data.msg, level:2, target:'#submit_change', mleft:0, mtop:-60}); >}
}
});
$.qicLoading({remove:true});// 読み込みを削除します。 。 。
});
});
!--[OK] ボタンをクリックしてユーザーのロール (バックエンド) を変更します-->
//[キャンセル] をクリックします。ダイアログボックスを閉じるためのボタン
$(function () {
$("#cancel_change").live('click', function () {
$(".set_user_list").dialog( "close");
});
});
// [リセット] をクリックして
$("#reset_change").live('click', function () 🎜>var Rid = $( ".current").attr("id").substring("ut_".length);
changeroleDialog(changeroleRoute.url(), {id:rid}, ".set_user_list" );
}) ;
});


うまくいかない場合は、アドバイスをお願いします。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：checkbox は、チェックボックスの読み取り専用効果を設定して、ユーザーが check_javascript スキルを実行できないようにします。次の記事：checkbox は、チェックボックスの読み取り専用効果を設定して、ユーザーが check_javascript スキルを実行できないようにします。

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル