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

数据库表中有一个单位表,里面包括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控件拖拽实现排序并同步数据库字段排序的相关叙述,希望大家喜欢。

时间: 2015-11-30

在ASP.NET 2.0中操作数据之四十四:DataList和Repeater数据排序(三)

第七步: 在自定义分页的Repeater 里添加排序功能 现在已经完成了自定义分页,我们再来添加排序功能.ProductsBLL类的GetProductsPagedAndSorted方法和GetProductsPaged一样有startRowIndex 和 maximumRows 参数,不一样的是它还多了一个sortExpression 参数.在SortingWithCustomPaging.aspx里使用GetProductsPagedAndSorted方法我们需要: 将ObjectDataS

repeater分页 内容显示

using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; usi

Repeater控件与PagedDataSource结合实现分页功能

本文讲解Repeater控件与PagedDataSource相结合实现其分页功能.PagedDataSource 类封装那些允许数据源控件(如 DataGrid.GridView)执行分页操作的属性.如果控件开发人员需对自定义数据绑定控件提供分页支持,即可使用此类. PagedDataSource 类的部分公共属性: AllowCustomPaging // 获取或设置指示是否启用自定义分页的值. AllowPaging // 获取或设置指示是否启用分页的值. Count // 获取要从数据源使

asp.net repeater手写分页实例代码

复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using BLL; using Model; using System.Data.SqlClient; using System.Data; public partial class Test_Re

asp.net Repeater之非常好的数据分页

分页控件源代码如下: 复制代码 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Collections; #region Assembly Resource Attribut

asp.net中让Repeater和GridView支持DataPager分页

改造办法是自己写一个控件,让它继承GridView或Repeater,并实现IPageableItemContainer 接口.下面要发的是国外某高手写的代码,测试有效.具体使用的时候,要建一个类库项目,把代码编译成dll后,就可以添加到VS的工具箱里了! 一.自定义Repeater 复制代码 代码如下: using System.Web.UI; using System.Web.UI.WebControls; namespace WYJ.Web.Controls { /// <summary>

在ASP.NET 2.0中操作数据之四十二:DataList和Repeater数据排序(一)

导言 DataList和Repeater数据分页里我们学习了如何在DataList里添加分页功能.我们在ProductsBLL类里创建了一个名为GetProductsAsPagedDataSource的方法,它返回一个PagedDataSource对象.当绑定到DataList或Repeater时,他们将只显示请求页的数据.这个技术和GridView,DetailsView,FormView的内置分页功能原理差不多. 除了分页外,GridView还提供了内置的排序功能,而DataList和Rep

asp.net Repeater分页实例(PageDataSource的使用)

Asp.net提供了三个功能强大的列表控件:DataGrid.DataList和Repeater控件,但其中只有DataGrid控件提供分页功能.相对DataGrid,DataList和Repeater控件具有更高的样式自定义性,所以很多时候我们喜欢使用DataList或Repeater控件来显示数据. 实现DataList或Repeater控件的分页显示有几种方法: 1.写一个方法或存储过程,根据传入的页数返回需要显示的数据表(DataTable) 2.使用PagedDataSource类(位

在ASP.NET 2.0中操作数据之四十三:DataList和Repeater数据排序(二)

接着上篇介绍,上篇已经通过DropDownList简单实现了排序的功能,下面让我们看看带有分页的排序该怎么做. 第五步: 为使用默认分页的DataList添加排序的支持 打开PagingSortingDataListRepeater文件夹里的SortingWithDefaultPaging.aspx和Paging.aspx 页.在Paging.aspx 页里查看源文件.将图8里选择的文本复制下来,然后粘贴到SortingWithDefaultPaging.aspx 页里的<asp:Content

asp.net下Repeater使用 AspNetPager分页控件

一.AspNetPager分页控件 分页是Web应用程序中最常用到的功能之一,在ASP.NET中,虽然自带了一个可以分页的DataGrid(asp.net 1.1)和GridView(asp.net 2.0)控件,但其分页功能并不尽如人意,如可定制性差.无法通过Url实现分页功能等,而且有时候我们需要对DataList和Repeater甚至自定义数据绑定控件进行分页,手工编写分页代码不但技术难度大.任务繁琐而且代码重用率极低,因此分页已成为许多ASP.NET程序员最头疼的问题之一. AspNet

AspNetPager分页控件源代码(Version 4.2)第1/2页

//AspNetPager分页控件源代码(Version 4.2): using System; using System.IO; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Collections.Specialized; using System.Text; using System.Componen

AspNetAjaxPager,Asp.Net通用无刷新Ajax分页控件,支持多样式多数据绑定

本控件可以对GridView,Repeater,DataGrid,DataList...几乎所有的.net数据绑定控件进行分页,全部无刷新,数据绑定部分可以使用存储过程也可以直接使用sql语句,这对本控件没有任何干扰!本控件具有较好的用户界面,能够根据需要变换各种样式,配合css控制效果则更好! 1.分页样式效果图: 2.如何使用: 于bin目录下添加:AspNetAjaxPager.dll引用 aspx文件内容: 复制代码 代码如下: <%@ Page Language="C#"

ASPNETPAGER分页控件的使用方法[图文]

1. 加入dll文件这是必须的. 2.拖入控件到应用位置,添加引用: 引用: <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %> 控件: 复制代码 代码如下: <div style="text-align:center;"> <webdiyer:AspNetPager ID=&q

AspNetPager分页控件UrlRewritePattern参数设置的重写代码

复制代码 代码如下: <AspNet:AspNetPager ID="AspPages" runat="server" CustomInfoHTML="第%CurrentPageIndex%/%PageCount%页,每页%PageSize%条,共%RecordCount%条"                            FirstPageText="首页" LastPageText="尾页"

AspNetPager分页控件定义及应用样式示例介绍

网易风格: 首页前页12345678910...后页尾页 CSS样式: 复制代码 代码如下: .anpager .cpb {background:#1F3A87 none repeat scroll 0 0;border:1px solid #CCCCCC;color:#FFFFFF;font-weight:bold;margin:5px 4px 0 0;padding:4px 5px 0;} .anpager a {background:#FFFFFF none repeat scroll 0

AspNetPager分页控件 存储过程

复制代码 代码如下: SET QUOTED_IDENTIFIER ON GO SET ANSI_NULLS ON GO ALTER PROCEDURE usp_PagingLarge @TableNames VARCHAR(200), --表名,可以是多个表,但不能用别名 @PrimaryKey VARCHAR(100), --主键,可以为空,但@Order为空时该值不能为空 @Fields VARCHAR(200), --要取出的字段,可以是多个表的字段,可以为空,为空表示select * @

asp.net分页控件AspNetPager的样式美化

在前段时间的开发网站的过程中,突然觉得这个简洁的样式看着和网站整体的风格实在不搭调,于是看看AspNetPager的最后生成html,写了一段CSS样式,将分页的样式和网站整体风格统一起来了. 效果如下: 做的不是很好看,希望大家不要丢砖头,俺的头没包棉絮,伤不起 ~-_-~ CSS样式表: /* AspNetPager Style Power By http://www.edweb.cn */.pager{ width:95%;  margin:10px; line-height:20px;

asp.net分页控件使用详解【附实例下载】

一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %> 2.写一个Repeater列表控件用于显示数据 <asp:Repeater ID

解析asp.net的分页控件

一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %> 2.写一个Repeater列表控件用于显示数据 <asp:Repeater ID