用jquery控制listbox中项的移动，并排序

  以下是用jquery控制ASP.NET中的两个asp:listbox控件中选择项的移动:

首先是html代码，页面上放2个listbox控件和2个按钮用于移动项目

代码

   < table  border ="0" >< tr >< td  width ="156" > 全部水果： </ td >< td  width ="142" > &nbsp; </ td >< td  width ="482" > 我挑选的： </ td ></ tr >< tr >< td  rowspan ="2" >< asp:ListBox  SelectionMode ="Multiple"  ID ="listall"  Rows ="12"  Width ="156"  runat ="server" ></ asp:ListBox ></ td >< td  height ="41"  align ="center" >< input  type ="button"  id ="btnleftmove"  value ="&gt;&gt;&gt;"  onclick ="move('listall','listmy');" />< br  />< br  />< input  type ="button"  id ="btnrighttmove"  value ="&lt;&lt;&lt;"  onclick ="move('listmy','listall');" /></ td >< td  rowspan ="2" >< asp:ListBox  SelectionMode ="Multiple"  ID ="listmy"  Rows ="12"  Width ="156"  runat ="server" ></ asp:ListBox ></ td ></ tr ></ table >   
   <!--  这里放个隐藏域用于取值  -->
   < input  id ="hidValue"  runat ="server"  type ="hidden"   />  

  
    
    
    
  
   
    
    
    
    
    
    
  

下面是在.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(); //用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( " <option tag=\ "" +tag+ " \ " > " + text + " </option> " ); 
     $(own).remove(); 
     $( " # " + setname + "" ).children( " option:first " ).attr( " selected " , true );

});       
     // 赋值到hidvalue中
         var  strvalue = "" ;  
        $.each($( " #listmy option " ),  function (id,own){
            strvalue += $(own).val();
             if (id != $( " #listmy option " ).size() - 1 )
                strvalue += " , " ;
        });
        $( " #hidUserRole " ).val(strvalue);
 }

  // 重新排序   
 $.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( " <option tag=\ "" +tag+ " \ " > " + text + " </option> " );
      one = $(own).next();
     }
     });
 }
}

 

这样就完成了简单的js控制两个列表项的值移动。

转载于:https://www.cnblogs.com/kaka8384/archive/2009/04/14/1432628.html