listbox_jquery 内の項目の移動と並べ替えを制御するための jquery の実装コード-jsチュートリアル-php.cn

1 つ目は、項目を移動するための 2 つのリストボックスコントロールと 2 つのボタンをページに配置する

コードをコピー

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

public Partial class _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"); Add( "梨"); 
list.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(""); $(own ).remove(); $("#" setname "").children("option:first").attr("selected", true);

});

} 
 //並べ替え
$.each($("#" getname " option"), function(id,own){ 
orderrole(getname) ); 
}); 
} 
 // ロールリストを最初の文字で並べ替えます
function orderrole(listname) 
{ 
var size=$("#" listname " オプション) ").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(); 
} 
 });

すべてのフルーツ:
;/asp:ListBox>