>  기사  >  웹 프론트엔드  >  listbox_jquery에서 항목의 이동 및 정렬을 제어하는 ​​jquery의 구현 코드

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

WBOY
WBOY원래의
2016-05-16 18:19:001125검색

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

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










모든 과일: 내 선택:
< ;/asp:ListBox>







다음은 .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 < 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"); "바나나");
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("");
$(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(""); $(own).next();
}
})
}
}

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.