jqueryはlistbox内のアイテムの移動とソートを制御する

まずhtmlコード、ページにlistboxコントロール2つとボタン2つを置いてアイテムを移動します

 
  











 
  
 
  
    ：
 
  
 
 
  
    ：
 
  
 
  
 
  
 
  
 
  


 
  
 
  
 
  
 
  
 
  
 
  
 
 

次はcsファイルにいくつかのデータをバインド

 
  
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(); // tag       
  
} 
  
} 
  
 
  
private ArrayList DataArray() 
  
{ 
  
//       ，                
  
ArrayList list = new ArrayList(); 
  
list.Add("  "); 
  
list.Add(" "); 
  
list.Add("  "); 
  
list.Add("  "); 
  
list.Add("  "); 
  
list.Add("  "); 
  
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(""+text+""); 
  
$(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(""+text+""); 
  
one=$(own).next(); 
  
} 
  
}); 
  
} 
  
} 
  
 
 

これにより、簡単なjs制御で2つのリスト項目の値移動が完了します.