jquery는 listbox_jquery에서 항목의 이동 및 정렬을 제어합니다.

첫 번째는 html 코드입니다. 페이지에 항목 이동을 위한 2개의 목록 상자 컨트롤과 2개의 버튼을 넣습니다.

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

< ;td width="142">

모든 과일:

내 선택:

< ;/asp :ListBox>

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

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

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

{
protected void Page_Load(object sender , EventArgs e)
{
if (!IsPostBack)
{
BindData()
}
}

private void BindData()
{
ArrayList list=DataArray ();
for (int i = 0; i < list.Count; 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"); .Add("Banana ");
return list;
}
}


실제 사용 시 데이터베이스의 필드에 따라 정렬할 수 있습니다

jquery 코드는 다음과 같습니다.

코드 복사

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

function 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>nexttag)
{
$(one).remove();
$(own).after("" text "");
one=$(own).next();
}
});
}
}


이로 값에 대한 간단한 js 제어가 완료됩니다. 두 목록 항목의 이동.