asp.net中使用 Repeater控制項拖拽實現排序並同步資料庫欄位排序

asp.net中使用 Repeater控制項拖拽實現排序並同步資料庫欄位排序_實用技巧

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

資料庫表中有一個單位表，裡麵包括ID、Name、Order等欄位，現在有個後台管理功能，可以設定這些單位在某些統計表格中的先後顯示順序，於是想到用拖拽方式實現，這樣操作起來更簡便。

使用了GifCam軟體做了一個樣本動畫，效果如下圖所示：

於是就動手起來，發現jquery.ui中提供sortable函數，可用於排序，介面中從資料庫綁定的單位使用Repeater控制項，下面簡單介紹下主要步驟：

1、項目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js請點擊進行下載，地址為：http://download.csdn.net/detail/taomanman/9315373

2、TestDemo.aspx代碼如下：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <script src="../../Scripts/jquery-1.7.2.min.js"></script>   <script src="../../Scripts/jquery-ui.min.js"></script>   <title>Repeater拖拽排序</title>   <style type="text/css">     #module_list {       margin-left: 4px;     }     .modules {       float: left;       width: 200px;       height: 140px;       margin: 10px;       border: 1px solid #acc6e9;       background: #e8f5fe;     }     .m_title {       margin-top: 0px;       height: 24px;       line-height: 24px;       background: #afc6e9;     }     #loader {       height: 24px;       text-align: center;     }   </style> </head> <body>   <form id="form1" runat="server">     <div id="loader"></div>     <div id="module_list">       <input type="hidden" id="orderlist" />       <asp:Repeater ID="rpt" runat="server">         <ItemTemplate>           <div class="modules" title='<%#Eval("F_DataCenterID") %>'>             <h3 class="m_title"><%#Eval("F_DataCenterName").ToString() %></h3>             <p><%#Eval("F_Order") %></p>           </div>         </ItemTemplate>       </asp:Repeater>     </div>   </form> </body> </html> <script type="text/javascript">   $(function () {     $(".m_title").bind('mouseover', function () {       $(this).css("cursor", "move")     });     var show = $("#loader");     var orderlist = $("#orderlist");     var list = $("#module_list");     var old_order = [];     //擷取原先的順序列表     list.children(".modules").each(function () {       var val = $(this).find("p").text();       old_order.push(val);     });     list.sortable({       opacity: 0.6, //設定拖動時候的透明度        revert: true, //緩衝效果        cursor: 'move', //拖動的時候滑鼠樣式        handle: '.m_title', //可以拖動的部位，模組的標題部分        update: function () {         var new_id = [];         list.children(".modules").each(function () {           new_id.push(this.title);         });         var newid = new_id.join(',');         var oldid = old_order.join(',');         $.ajax({           type: "post",           url: "update.aspx", //服務端處理常式            data: { id: newid, order: oldid },  //id:新的排列對應的ID,order：原排列順序            beforeSend: function () {             show.html("<img src='load.gif' /> 正在更新...");           },           success: function (msg) {             show.html("排序成功...");             //重新重新整理頁面             window.location.reload();           }         });       }     });   }); </script>

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();     }   }   /// <summary>   /// 綁定部委單位   /// </summary>   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代碼如下：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   <title></title> </head> <body>   <form id="form1" runat="server">   <div>   </div>   </form> </body> </html> [csharp] view plaincopypublic 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);     }   }   /// <summary>   /// 重新更新順序   /// </summary>   /// <param name="deptId"></param>   /// <param name="order"></param>   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)           {           }         }       }     }   } }

以上內容是小編給大家介紹的關於asp.net中使用 Repeater控制項拖拽實現排序並同步資料庫欄位排序的相關敘述，希望大家喜歡。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More