asp.net中使用中继器控件拖拽实现排序并同步数据库字段排序

数据库表中有一个单位表，里面包括身份证、姓名、订单等字段，现在有个后台管理功能，可以设置这些单位在某些统计表格中的先后显示顺序，于是想到用拖拽方式实现，这样操作起来更简便。

使用了GifCam软件做了一个示例动画，效果如下图所示：

于是就动手起来，发现jquery.ui中提供可分类的函数，可用于排序，界面中从数据库绑定的单位使用中继器控件，下面简单介绍下主要步骤：

1、项目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js请点击进行下载，地址为：http://下载。csdn。网络/详情/满涛人/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 '/脚本src=' http :/./Scripts/jquery-1。7 .2 .量滴js '/script脚本src=' http :/./Scripts/jquery-ui。量滴js '/脚本标题中继器拖拽排序/title style type=' text/CSS ' # module _ list { margin-left : 4px；} .模块{左侧浮动：宽度： 200像素；高度： 140像素；margin: 10pxborder: 1px固体# acc6e9背景# e8f5fe}。m _ title { margin-top : 0px；高度： 24px线高： 24px背景# afc6e9} #装载机{ height: 24px文本对齐：中心；}/样式/头部正文表单标识='表单1 '运行于='服务器' div标识='加载程序'/div标识='模块_列表'输入类型=' hidden ' ID=' order list '/ASP : repeater ID=' RPT '运行于=' server '项模板div class=' modules ' title=' % # Eval(' F _ datacenteid ')% ' H3类=' m _ title ' % # Eval(' F _ datacentename ').ToString()%/H3 p % # Eval(' F _ Order ')%/p/div/项目模板/asp:中继器/div/表单/正文/html脚本类型=' text/JavaScript ' $(function(){ $(').m _ title ').bind('mouseover '，function () { $(this).css(“”光标','移动')});var show=$(' # loader ')；var订单列表=$(' #订单列表')；var list=$(' # module _ list ')；var old _ order=[]；//获取原先的顺序列表list.children(' .模块')。每个（函数(){ var val=$(this)).查找(' p ').text()；旧订单。push(val)；});名单。可排序({ opa city 3360 0.6，//设置拖动时候的透明度revert: true，//缓冲效果cursor: '移动',//拖动的时候鼠标样式把手：'。'' m_title '，//可以拖动的部位，模块的标题部分update : function(){ var new _ id=[]；list.children(' .模块')。每个(function(){ new _ id。推(这个。标题)；});var newid=new_id.join('，')；var oldid=old_order.join('，')；$.ajax({ type: 'post '，url: 'update.aspx '，//服务端处理程序data: { id: newid，order: oldid }，//id:新的排列对应的订单编号：原排列顺序发送前：函数(){ show.html('img src='load.gif' /正在更新.');}，成功：函数(msg) { show.html('排序成功.');//重新刷新页面窗户。位置。重载()；} });} });});/script TestDemo.cs代码如下，具体数据库操作类获取数据根据各自的情况进行，这里就不详细介绍了。

公共部分类TestDemo :系统网络。ui。page { public static GGJ _ DC _数据中心base infobll=new GGJ _ DC _ data center base infobll()；受保护的无效页面_加载(对象发送方，事件参数e) { if(！IsPostBack){ BindData()；} } ///摘要///绑定部委单位////summary public void BindData(){ string，其中=' ';字符串Order by=' F _ Order as datatable dt=bll .GetData(其中，按顺序排列)；这个。RPT。数据源=dt这个。RPT。DataBind()；} } 3、$.创建交互式、快速动态网页应用的网页开发技术方法请求的页面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表单id=' form 1 ' runat=' server ' div/div/form/body/html[csharp]查看普通副本公共分部类更新：系统.网络。ui。page { public static GGJ _ DC _数据中心base infobll=new GGJ _ DC _ data center base infobll()；受保护的无效页面_加载(对象发送方，事件参数e) { if(！IsPostBack){ 0字符串顺序=请求['顺序']。ToString()；字符串depId=请求['id'].ToString()；UpdateOrder(depId，order)；} } ///摘要///重新更新顺序////summary////param name=' deptId '/param///param name=' order '/param public void UpdateOrder(string deptId，string order){ string[]deptIds=deptId .拆分(',');字符串[]订单=订单.拆分(',');for(int I=0；我是德普蒂斯。长度；I){ for(int j=0；j命令。长度；j){ if(I==j){ string SQL=' update GGJ _ DC _ DataCenterBaseInfo set F _ Order=' orders[j]'其中f _ DataCenterID=' deptIds[I]'；数据表dt=公共类.查询SQL。GetDataTable(SQL)；if (dt .行数。计数0) { } } } } }以上内容是小编给大家介绍的关于ASP。网中使用中继器控件拖拽实现排序并同步数据库字段排序的相关叙述，希望大家喜欢。