服务器之家

服务器之家 > 正文

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

时间:2019-12-29 13:11     来源/作者:mrr

数据库表中有一个单位表,里面包括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代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!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代码如下,具体数据库操作类获取数据根据各自的情况进行,这里就不详细介绍了。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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控件拖拽实现排序并同步数据库字段排序的相关叙述,希望大家喜欢。

相关文章

热门资讯

玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
配置IIS网站web服务器的安全策略配置解决方案
配置IIS网站web服务器的安全策略配置解决方案 2019-05-23
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情 2019-06-22
Nginx服务器究竟是怎么执行PHP项目
Nginx服务器究竟是怎么执行PHP项目 2019-05-24
返回顶部