开发者社区> 暖枫无敌> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

asp.net Repeater拖拽实现排序并同步排序字段到数据库中

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

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

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

                              

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

1、项目中使用到的jquery-1.7.2.min.jsjquery-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>

    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)
                        {
 
                        }
                    }
                }
            }

        }
    }

===========================================================================

如果觉得对您有帮助,微信扫一扫支持一下:



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【零基础入门 HTML + CSS + JavaScript 实现打地鼠小游戏】 闲暇时刻玩一玩 轻松丢烦恼~
【零基础入门 HTML + CSS + JavaScript 实现打地鼠小游戏】 闲暇时刻玩一玩 轻松丢烦恼~
63 0
MySQL order by关键字详解,order by排序
ORDER BY 关键字 一、order by 简介
117 0
mysql 5.6 order by limit 排序分页数据重复问题
mysql 5.6 order by limit 排序分页数据重复问题
211 0
用ASP.NET Core 2.1 建立规范的 REST API -- 翻页/排序/过滤等
本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/9010978.html 和 http://www.cnblogs.com/cgzl/p/9019314.
1655 0
asp.net中使用分页控件,并绑定数据到GridView或Repeater
/// /// (asp.net网页中)使用显示上下页的控件(LtpPageControl.Page02)--GridView /// /// LtpPageControl.
923 0
ComponentArt Web.UI for ASP.NET 2.X序列号
昨天晚上研究了一下ComponentArt Web.UI for ASP.NET控件,目前已经分析出了 其中的注册序列号,值此blog开张之际,公布出来分享,by the way,根据下面的序列号安装软件还可以直接安装其中的源代码: 1.
830 0
艾伟_转载:ASP.NET实现类似Excel的数据透视表
代码: /Files/zhuqil/Pivot.zip     数据透视表提供的数据三维视图效果,在Microsoft Excel能创建数据透视表,但是,它并不会总是很方便使用Excel。您可能希望在Web应用程序中创建一个数据透视报表。
737 0
Docker 为 ASP.NET Core Web 应用程序生成 Docker 映像,创建并运行多个容器
1.为 ASP.NET Core 应用程序生成 Docker 映像 下载这个事例项目:https://github.com/dotnet/dotnet-docker/tree/master/samples/aspnetapp 下载完成后给这项目生成一个镜像名为aspnetapp镜像 docker build -t aspnetapp .
953 0
+关注
625
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载