数据库表中有一个单位表，里面包括ID、Name、Order等字段，现在有个后台管理功能，可以设置这些单位在某些统计表格中的先后显示顺序，于是想到用拖拽方式实现，这样操作起来更简便。

     使用了GifCam软件做了一个示例动画，效果如下图所示：

                              

      于是就动手起来，发现jquery.ui中提供sortable函数，可用于排序，界面中从数据库绑定的单位使用Repeater控件，下面简单介绍下主要步骤：

1、项目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js请点击进行下载，地址为：

2、TestDemo.aspx代码如下：

    
                         
     
        
      
        
      
            
                   
                       
                            
         
                        
          
<%#Eval("F_DataCenterName").ToString() %>
                        
          
<%#Eval("F_Order") %>
                    
         
                
                    
               
      
    
     

TestDemo.cs代码如下，具体数据库操作类获取数据根据各自的情况进行，这里就不详细介绍了。

public partial class TestDemo : System.Web.UI.Page    {        public static GGJ_DC_DataCenterBaseInfoBLL bll = new GGJ_DC_DataCenterBaseInfoBLL();        protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            {                BindData();            }        }        /// 
        /// 绑定部委单位        /// 
        public void BindData()        {            string where = "";            string orderby = "F_Order ASC";            DataTable dt = bll.GetData(where, orderby);            this.rpt.DataSource = dt;            this.rpt.DataBind();        }    }

3、$.ajax方法请求的页面update.aspx及update.aspx.cs代码如下：

public partial class update : System.Web.UI.Page    {        public static GGJ_DC_DataCenterBaseInfoBLL bll = new GGJ_DC_DataCenterBaseInfoBLL();        protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            {                string order = Request["order"].ToString();                string depId = Request["id"].ToString();                UpdateOrder(depId, order);            }        }        /// 
        /// 重新更新顺序        /// 
        ///         ///         public void UpdateOrder(string deptId, string order)        {            string[] deptIds = deptId.Split(',');            string[] orders = order.Split(',');            for (int i = 0; i < deptIds.Length; i++)            {                for (int j = 0; j < orders.Length; j++)                {                    if (i == j)                    {                        string sql = "update GGJ_DC_DataCenterBaseInfo set F_Order=" + orders[j] + " where F_DataCenterID='" + deptIds[i]+ "'";                        DataTable dt = CommonClass.QuerySQL.GetDataTable(sql);                        if (dt.Rows.Count > 0)                        {                         }                    }                }            }        }    }

===========================================================================

如果觉得对您有帮助，微信扫一扫支持一下：