ホームページ > ウェブフロントエンド > jsチュートリアル > listbox_jquery 内の項目の移動と並べ替えを制御するための jquery の実装コード

listbox_jquery 内の項目の移動と並べ替えを制御するための jquery の実装コード

WBOY
リリース: 2016-05-16 18:19:00
オリジナル
1174 人が閲覧しました

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();
}
});
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
すべてのフルーツ:

;/asp:ListBox>