在asp.net中利用Repeater控件怎么对数据库中的字段进行排序

发布时间:2020-12-18 15:39:22 作者:Leah
来源:亿速云 阅读:167

本篇文章给大家分享的是有关在asp.net中利用Repeater控件怎么对数据库中的字段进行排序,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

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

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

在asp.net中利用Repeater控件怎么对数据库中的字段进行排序

于是就动手起来,发现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") %>'> 
            <h4 class="m_title"><%#Eval("F_DataCenterName").ToString() %></h4> 
            <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控件怎么对数据库中的字段进行排序,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

推荐阅读:
  1. 怎么在Python中利用sorted对字典的key进行排序
  2. Repeater数据控件怎么在ASP.NET中使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

repeater 数据库 排序

上一篇:怎么在xampp中搭建一个php虚拟主机

下一篇:利用SWFUpload怎么实现一个无刷新图片上传功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》