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

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

 

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

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

1、项目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js请点击进行下载，地址为：https://download.csdn.net/detail/taomanman/9315373

 

2、testdemo.x代码如下：

<script src="../../scripts/jquery-1.7.2.min.js"></script><script src="../../scripts/jquery-ui.min.js"></script>

 

<%#eval("f_datacentername").tostring() %>

<%#eval("f_order") %>

 

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();
            }
        }

        /// 
        /// 绑定部委单位
        /// 
        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代码如下：

 

 

 

 

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

        /// 
        /// 重新更新顺序
        /// 
        ///
        ///
        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)
                        {
 
                        }
                    }
                }
            }

        }
    }