asp.net中使用 Repeater控件拖拽实现排序并同步数据库字段排序
更新时间：2021年9月22日 10:09 点击：2103
数据库表中有一个单位表，里面包括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>
[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控件拖拽实现排序并同步数据库字段排序的相关叙述，希望大家喜欢。
相关文章
- 操作类就是把一些常用的一系列的数据库或相关操作写在一个类中，这样调用时我们只要调用类文件，如果要执行相关操作就直接调用类文件中的方法函数就可以实现了，下面整理了...2016-11-25
- 本文给大家分享C#连接SQL数据库和查询数据功能的操作技巧，本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友参考下吧...2021-05-17
- 这篇文章主要介绍了C#从数据库读取图片并保存的方法，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2021-01-16
- 这篇文章主要介绍了Intellij IDEA连接Navicat数据库的方法,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借价值，需要的朋友可以参考下...2021-03-25
- 在开发过程中，我们经常会将日期时间的毫秒数存放到数据库，但是它对应的时间看起来就十分不方便，我们可以使用一些函数将毫秒转换成date格式。 一、 在MySQL中，有内置的函数from_unixtime()来做相应的转换，使用如下： 复制...2014-05-31
- C#使用System.IO中的文件操作方法在Windows系统中处理本地文件相当顺手,这里我们还总结了在Oracle中保存文件的方法,嗯,接下来就来看看整理的C#操作本地文件及保存文件到数据库的基本方法总结...2020-06-25
- 通过内网连另外一台机器的mysql服务， 确发现速度N慢！ 等了大约几十秒才等到提示输入密码。 但是ping mysql所在服务器却很快！ 想到很久之前有过类似的经验， telnet等一些服务在连接请求的时候，会做一些反向域名解析（如果...2015-10-21
- 某些时候，例如为了搭建一个测试环境，或者克隆一个网站，需要复制一个已存在的mysql数据库。使用以下方法，可以非常简单地实现。假设已经存在的数据库名字叫db1，想要复制一份，命名为newdb。步骤如下：1. 首先创建新的数据库newd...2015-10-21
- mysqldump命令的用法1、导出所有库系统命令行mysqldump -uusername -ppassword --all-databases > all.sql 2、导入所有库mysql命令行mysql>source all.sql; 3、导出某些库系统命令行mysqldump -uusername -ppassword...2015-10-21
- 1005：创建表失败1006：创建数据库失败1007：数据库已存在，创建数据库失败1008：数据库不存在，删除数据库失败1009：不能删除数据库文件导致删除数据库失败1010：不能删除数据目录导致删除数据库失败1011：删除数据库...2013-09-23
- 这篇文章主要介绍了c#从数据库里取得数据并异步更新ui的方法，大家参考使用吧...2020-06-25
- yii2.0框架是PHP开发的一个比较高效率的框架，集合了作者的大量心血，下面通过用户为例给大家详解yii2使用中的一些基本的增删改查操作。 User::find()->all(); //返回所有用户数据； User::findOne($id); //返回 主键...2015-11-24
- 这篇文章主要介绍了springBoot 项目排除数据库启动方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-10
- 1.用phpmyadmin创建数据库和数据表 创建数据库的时候，请将“整理”设置为：“utf8_general_ci” 或执行语句： 复制代码 代码如下:CREATE DATABASE `dbname` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; 创...2015-10-21
- 这篇文章主要介绍了Linux 下使用shell脚本定时维护数据库，本文通过案例分析给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- “主机，用户名，密码”得到连接、“数据库，sql，连接”得到结果，最后是结果的处理显示。当然，数据库连接是扩展库为我们完成的，我们能做的仅仅是处理结果而已。...2013-09-29
- 对数据加密分两种，一种是对数据库本身进行加密，另一种是对数据表中的数据进行加密，下面通过本文给大家介绍C#连接加密的Sqlite数据库的方法，感兴趣的朋友一起看看吧...2020-06-25
- 这篇文章主要介绍了Java连接数据库oracle中文乱码解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-16
- 本篇文章是对C#连接Oracle数据库的连接字符串进行了详细的分析介绍，需要的朋友参考下...2020-06-25
- 今天向MySQL数据库中的一张表添加含有中文的数据，可是老是出异常，检查程序并没有发现错误，无奈呀，后来重新检查这张表发现表的编码方式为latin1并且原想可以插入中文的字段的编码方式也是latin1，然后再次仔细观察控制台输...2014-05-31