標籤：
資料庫表中有一個單位表，裡麵包括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>
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); } } /// <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拖拽實現排序並同步排序欄位到資料庫中
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
