jquery 목록 양방향 selector_jquery의 향상된 버전

예전에 "Jquery Simple Application Summary"라는 글을 올렸던 기억이 나네요. 드디어 제가 만든 목록 양방향 선택기가 있었는데, 어제는 할 일이 없어 선택 옵션으로 요소를 변경했습니다. Shift 다중 선택을 지원한다는 점입니다. 코드의 양도 간소화되었습니다.


내 양방향 선택기는 역할 일괄 수정과 역할 정보에 대한 키워드 쿼리를 지원합니다. 소스 코드는 다음과 같습니다.
html 페이지:

코드 복사 코드는 다음과 같습니다.

< ;link href="@{'/public/stylesheets/ui-lightness/jquery-ui-1.9.1.custom.css'}" rel="stylesheet">

>

사용자 목록

< ;p> 이름 계좌번호

>#{목록 항목:activedUserList,as :'items'}
#{emVF items.name/} #{emVF items.account/}
#{/list}

< /div>

버튼" value= "추가>>" class="common_blue" id="addThisRole">

역할 사용자 목록

이름 계정

#{목록 항목: roleList,as :'items'}
#{emVF items.name/} #{emVF items.account/}
#{/list}
< / select>

다음은 JS 코드입니다.

코드를 복사하세요

코드는 다음과 같습니다

//사용자 목록, 역할 사용자 목록 로드
functionchangeroleDialog(url,parameters, renderContainer) {
//데이터를 로드하기 전에 로드를 표시합니다. . .
$.qicLoading({
target:'body',
text:"하드 로드 중...",
modal:true,
width:180,
top: ' 290px',
왼쪽:'450px',
위치:"절대",
zIndex:2000
})
$.ajax({
url:url,
data:parameters,
유형:"GET",
dataType:"html",
success:function (html) {
$(renderContainer).html(html)
$ (renderContainer).dialog({
autoOpen:true,
width:590,
modal:true,
resizing:false,
draggable:true
}); }
});
$.qicLoading({remove:true});//로드를 제거합니다. . .
}
$(function () {
var leftSel = $("#selectL");
var rightSel = $("#selectR");
//클릭하여 로드 사용자 목록, 역할 사용자 목록
$(".add_remove_user").live('click', function () {
varrid = $(".current").attr("id").substring( "ut_ ".length);
changeroleDialog(changeroleRoute.url(), {id:rid}, ".set_user_list")
//#####클릭 "/ "왼쪽 및 오른쪽 전환 목록 제거begin#######//
$("#addThisRole").live("click", function () {
$("#selectL option:selected" ).each(function () {
$(this).remove().prependTo("#selectR");
})
$("#deleteThisRole") .live ("클릭", function () {
$("#selectR option:selected").each(function () {
$(this).remove().prependTo("#selectL") ;
});
})
//########듣기를 전환하려면 "추가/제거"를 클릭하세요.#######// /# #######더블클릭 옵션 전환 목록 시작########//
leftSel.live('dblclick', function () {
$(this).find ("옵션: 선택됨").each(function () {
$(this).remove().prependTo("#selectR");
})
rightSel .live(' dblclick', function () {
$(this).find("option:selected").each(function () {
$(this).remove().prependTo("# selectL");
});
});
//########듣기를 전환하려면 옵션을 두 번 클릭하세요.########//
//##### ###텍스트 상자 프롬프트 메시지를 취소하고 시작에 집중하려면 마우스를 클릭하세요.########//
$(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;
}
})
})
//####### 텍스트 상자 메시지를 취소하려면 마우스를 누르세요. and focus on end #######
//-- 사용자 목록에 내용을 입력하고 Enter 키를 누르면 쿼리 결과가 표시됩니다. start----//
$(".set_user_i"). live('keypress', function (event) {
var keycode = event.which;
var Condition = $(".set_user_i").val();
if (keycode == 13) {
//데이터를 로드하기 전에 로드를 표시합니다. . .
$.qicLoading({
target:'body',
text:"하드 로드 중...",
modal:true,
width:180,
top: ' 290px',
왼쪽:'450px',
위치:"absolute",
zIndex:2000
})
$.ajax({
url:getUserRount.url( ),
데이터:{조건:조건},
유형:"GET",
데이터 유형:"json",
success:function (데이터) {
var select = $( " #selectL");
if (data.length == 0) {
$("#selectL option").remove();
var option = $("")
.append('일치하는 쿼리 결과가 없습니다')
select.append(option);
$.qicLoading ({ 제거:true});//로드 제거
return;
}
$("#selectL option").remove()
for (var i = 0 ; i < data .length; i ) {
var id = data[i]._1;
var name = data[i]._2
var account = data[i]._3; = $("")
.append( 이름 ).append(" " 계정);
select.append(옵션)
}
}
})
$.qicLoading({remove:true });// 로딩을 제거하세요. . .
}
});
$(".set_user_i_2").live('keypress', function (event) {
var keycode = event.which;
// 텍스트 상자 내용
var Condition = $(".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',
position: "absolute",
zIndex:2000
});
$.ajax({
url:getRoleUserRount.url(),
data:{condition:condition, roleId:rid},
유형: "GET",
dataType:"json",
success:function (data) {
var select = $("#selectR")
if (data.length == 0) {
$("#selectR option").remove();
var option = $("< ;/option>" )
.append('일치하는 쿼리 결과 없음')
select.append(option)
$.qicLoading({remove:true});//로드 제거 .
반환;
}
/* $(".tr_checked").each(function(){
$(this).remove();
});*/
$("#selectR option").remove();
for (var i = 0; i < data.length; i ) {
var id = data[i]._1; var name = data[i]._2;
var account = data[i]._3;
var option = $("")
.append(name).append(" " 계정);
select.append(option);
}
}
});
$.qicLoading({remove:true});//로드를 제거합니다. . .
}
})


$(function () {
$("#submit_change").live('click', function () {
var form = $("#changeRoleForm") ;
var urid = [];//역할 사용자 목록의 사용자 ID 배열
var uid = [];//사용자 목록의 사용자 ID 배열
//현재 선택된 역할 ID
varrid = $(".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 option").each(function () {
if ($(this).attr("param_id") ! = 정의되지 않음) {
urid.push ($(this).attr("param_id"));
}
console.log(urid)
}); $.qicLoading({
target:'body',
text:"Loading hard...",
modal:true,
width:180,
top :'50%',
왼쪽:'50%',
위치:"절대",
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});//로드를 제거합니다. . .
});
});