jquery は listbox_jquery 内の項目の移動と並べ替えを制御します

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

コードをコピーします コードは次のとおりです。次のように:

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

以下は .cs ファイルにデータをバインドします

コピーcode コードは次のとおりです。

public Partial class _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("マンゴー"); .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);
});
}
//Reorder
$.each($("#" getname " option"), function(id,own){
orderrole(getname);
}

//最初のアルファベット順のロールリストを押します
function orderrole(listname)
{
var size=$(" #" リスト名 " オプション").size();
var one=$("#" リスト名 " オプション: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 "");
one=$(own).next();
}
});
}
}


これで、値の単純な JS 制御が完了しました。 2 つのリスト項目の移動。