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

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

WBOY
リリース: 2016-05-16 18:41:49
オリジナル
1301 人が閲覧しました

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 コードです:




コードをコピーします


コードは次のとおりです: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("");
one=$(own).next();
}
});
}
}


これで、値の単純な JS 制御が完了しました。 2 つのリスト項目の移動。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート