asp.net中使用 Repeater控件拖拽实现排序并同步数据库字段排序
程序员文章站
2023-12-20 23:41:28
数据库表中有一个单位表，里面包括id、name、order等字段，现在有个后台管理功能，可以设置这些单位在某些统计表格中的先后显示顺序，于是想到用拖拽方式实现，这样操作起来...
数据库表中有一个单位表，里面包括id、name、order等字段，现在有个后台管理功能，可以设置这些单位在某些统计表格中的先后显示顺序，于是想到用拖拽方式实现，这样操作起来更简便。
使用了gifcam软件做了一个示例动画，效果如下图所示：
于是就动手起来，发现jquery.ui中提供sortable函数，可用于排序，界面中从数据库绑定的单位使用repeater控件，下面简单介绍下主要步骤：
1、项目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js请点击进行下载，地址为：
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 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控件拖拽实现排序并同步数据库字段排序的相关叙述，希望大家喜欢。