listbox_jquery에서 항목의 이동 및 정렬을 제어하는 ​​jquery의 구현 코드

첫 번째는 페이지에 항목 이동을 위한 2개의 목록 상자 컨트롤과 2개의 버튼을 배치하는 것입니다.

코드 복사 다음과 같습니다:

tr>

모든 과일:		내 선택:

다음은 .cs 파일의 일부 데이터를 바인딩하는 것입니다

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

public 부분 클래스 _Default: System.Web.UI.Page

{
protected void Page_Load (객체 발신자, EventArgs e)
{
if (!IsPostBack)
{
BindData()
}
}
private void BindData()
{
ArrayList list=DataArray();
for (int i = 0; i {
listall.Items.Add(list[i].ToString() );
listall.Items[i].Attributes["tag"] = i.ToString(); //정렬 필드를 기록하기 위해 태그 사용
}
}
private ArrayList DataArray()
{
//사용된 일부 데이터는 기본적으로 첫 번째 단어의 병음으로 정렬됩니다.
ArrayList list = new ArrayList()
list.Add("Strawberry")
list. Add("배");
list.Add("오렌지");
list.Add("망고")
list.Add("Apple"); "바나나");
return list;
}
}

실제 사용 시 데이터베이스의 필드에 따라 정렬할 수 있습니다. 🎜>다음은 jquery 코드입니다:






코드 복사

코드는 다음과 같습니다 //모바일 사용자 선택한 역할//setname: 데이터를 이동할 목록의 이름 getname: 데이터를 이동할 목록의 이름

함수 move(setname,getname)

{
var size=$("#" setname " option").size()
var selsize=$("#" setname " option:selected").size(); >if(size>0&&selsize>0)
{
$.each($("#" setname " option:selected"), function(id,own){
var text=$(own) .text();
var tag=$(own).attr("tag")
$("#" getname).prepend("" text "");
$(own ).remove();
$("#" setname "").children("option:first").attr("selected", true);
});
}
//재주문
$.each($("#" getname " option"), function(id,own){
orderrole(getname) );
});
}
//첫 글자로 역할 목록 정렬
function orderrole(listname)
{
var size=$("#" listname " option ").size();
var one=$(" #" listname " option:first-child");
if(size>0)
{
var text=$(one ).text();
var tag=parseInt($( one).attr("tag"))
//목록의 첫 번째 값 아래에 있는 모든 요소를 ​​반복합니다
$.each($ (one).nextAll(), function(id,own){
var nextag=parseInt($(own).attr("tag"))
if(tag>nextag)
{
$(one).remove();
$( own).after("" text ""); $(own).next();
}
})
}
}