asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫字段排序

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:38:02

asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫字段排序

asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫字段排序:數(shù)據(jù)庫表中有一個(gè)單位表，里面包括ID、Name、Order等字段，現(xiàn)在有個(gè)后臺(tái)管理功能，可以設(shè)置這些單位在某些統(tǒng)計(jì)表格中的先后顯示順序，于是想到用拖拽方式實(shí)現(xiàn)，這樣操作起來更簡(jiǎn)便。使用了GifCam軟件做了一個(gè)示例動(dòng)畫，效果如下圖所示：于是就動(dòng)手起來

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫字段排序:數(shù)據(jù)庫表中有一個(gè)單位表，里面包括ID、Name、Order等字段，現(xiàn)在有個(gè)后臺(tái)管理功能，可以設(shè)置這些單位在某些統(tǒng)計(jì)表格中的先后顯示順序，于是想到用拖拽方式實(shí)現(xiàn)，這樣操作起來更簡(jiǎn)便。使用了GifCam軟件做了一個(gè)示例動(dòng)畫，效果如下圖所示：于是就動(dòng)手起來

數(shù)據(jù)庫表中有一個(gè)單位表，里面包括ID、Name、Order等字段，現(xiàn)在有個(gè)后臺(tái)管理功能，可以設(shè)置這些單位在某些統(tǒng)計(jì)表格中的先后顯示順序，于是想到用拖拽方式實(shí)現(xiàn)，這樣操作起來更簡(jiǎn)便。

使用了GifCam軟件做了一個(gè)示例動(dòng)畫，效果如下圖所示：

于是就動(dòng)手起來，發(fā)現(xiàn)jquery.ui中提供sortable函數(shù)，可用于排序，界面中從數(shù)據(jù)庫綁定的單位使用Repeater控件，下面簡(jiǎn)單介紹下主要步驟：

1、項(xiàng)目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js請(qǐng)點(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") %>'> 
 <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, //設(shè)置拖動(dòng)時(shí)候的透明度 
 revert: true, //緩沖效果 
 cursor: 'move', //拖動(dòng)的時(shí)候鼠標(biāo)樣式 
 handle: '.m_title', //可以拖動(dòng)的部位，模塊的標(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:新的排列對(duì)應(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方法請(qǐng)求的頁面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) 
 { 
 } 
 } 
 } 
 } 
 } 
}

以上內(nèi)容是小編給大家介紹的關(guān)于asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫字段排序的相關(guān)敘述，希望大家喜歡。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫字段排序

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：如何實(shí)現(xiàn) 數(shù)據(jù)庫

熱門焦點(diǎn)

asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫字段排序

asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫字段排序

asp.net中使用 Repeater控件拖拽實(shí)現(xiàn)排序并同步數(shù)據(jù)庫字段排序

最新推薦

猜你喜歡

熱門推薦