數(shù)據(jù)庫表中有一個單位表，里面包括ID、Name、Order等字段，現(xiàn)在有個后臺管理功能，可以設(shè)置這些單位在某些統(tǒng)計表格中的先后顯示順序，于是想到用拖拽方式實現(xiàn)，這樣操作起來更簡便。
使用了GifCam軟件做了一個示例動畫，效果如下圖所示：
于是就動手起來，發(fā)現(xiàn)jquery.ui中提供sortable函數(shù)，可用于排序，界面中從數(shù)據(jù)庫綁定的單位使用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, //設(shè)置拖動時候的透明度
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", //服務(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ù)各自的情況進行，這里就不詳細介紹了。
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)
{
}
}
}
}
}
}
以上內(nèi)容是小編給大家介紹的關(guān)于asp.net中使用 Repeater控件拖拽實現(xiàn)排序并同步數(shù)據(jù)庫字段排序的相關(guān)敘述，希望大家喜歡。
您可能感興趣的文章:- repeater分頁 內(nèi)容顯示
- asp.net repeater手寫分頁實例代碼
- asp.net Repeater之非常好的數(shù)據(jù)分頁
- asp.net下Repeater使用 AspNetPager分頁控件
- asp.net中讓Repeater和GridView支持DataPager分頁
- asp.net Repeater分頁實例(PageDataSource的使用)
- Repeater控件與PagedDataSource結(jié)合實現(xiàn)分頁功能
- 在ASP.NET 2.0中操作數(shù)據(jù)之四十二：DataList和Repeater數(shù)據(jù)排序（一）
- 在ASP.NET 2.0中操作數(shù)據(jù)之四十三：DataList和Repeater數(shù)據(jù)排序（二）
- 在ASP.NET 2.0中操作數(shù)據(jù)之四十四：DataList和Repeater數(shù)據(jù)排序（三）
