本篇文章給大家分享的是有關(guān)在asp.net中利用Repeater控件怎么對數(shù)據(jù)庫中的字段進(jìn)行排序,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
數(shù)據(jù)庫表中有一個單位表,里面包括ID、Name、Order等字段,現(xiàn)在有個后臺管理功能,可以設(shè)置這些單位在某些統(tǒng)計表格中的先后顯示順序,于是想到用拖拽方式實(shí)現(xiàn),這樣操作起來更簡便。
使用了GifCam軟件做了一個示例動畫,效果如下圖所示:
于是就動手起來,發(fā)現(xiàn)jquery.ui中提供sortable函數(shù),可用于排序,界面中從數(shù)據(jù)庫綁定的單位使用Repeater控件,下面簡單介紹下主要步驟:
1、項(xiàng)目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js請點(diǎn)擊進(jìn)行下載,地址為: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") %>'> <h4 class="m_title"><%#Eval("F_DataCenterName").ToString() %></h4> <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, //設(shè)置拖動時候的透明度 revert: true, //緩沖效果 cursor: 'move', //拖動的時候鼠標(biāo)樣式 handle: '.m_title', //可以拖動的部位,模塊的標(biāo)題部分 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", //服務(wù)端處理程序 data: { id: newid, order: oldid }, //id:新的排列對應(yīng)的ID,order:原排列順序 beforeSend: function () { show.html("<img src='load.gif' /> 正在更新..."); }, success: function (msg) { show.html("排序成功..."); //重新刷新頁面 window.location.reload(); } }); } }); }); </script>
TestDemo.cs代碼如下,具體數(shù)據(jù)庫操作類獲取數(shù)據(jù)根據(jù)各自的情況進(jìn)行,這里就不詳細(xì)介紹了。
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 plaincopy 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控件怎么對數(shù)據(jù)庫中的字段進(jìn)行排序,小編相信有部分知識點(diǎn)可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞標(biāo)題:在asp.net中利用Repeater控件怎么對數(shù)據(jù)庫中的字段進(jìn)行排序-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址:http://chinadenli.net/article32/dsjcpc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計、建站公司、網(wǎng)站排名、網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、手機(jī)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容