首页  ·  知识 ·  前端
Jquery客户端拖拽排序方法
chunchill  博客园|  综合  编辑:德仔   图片来源:网络
原理:客户端排序(或者说组织新的排序顺序),Ajax 更新服务器端数据。 nbsp

原理:客户端排序(或者说组织新的排序顺序),Ajax 更新服务器端数据。

      客户端用jquery插件sortable实现拖拽排序,保存之前检索顺序变化了的数据,并组织成Json数据,用AJax传送到服务器端的处理文件(这里用的是一般处理文件),进行数据库的更新。难点之处在于如何检测出顺序变化了的数据,或者说如何标示状态变化的数据。本文没有实现如何去标示顺序变化的数据,而是保存了数据初始化时的顺序(注:orderid 的顺序表中有排序字段orderid),在排序结束之后保存之前,再一次获取当前的数据排序顺序(orderid 的顺序),在比较这两个数组,若相应索引处数据不一样即认为顺序发生了改变,此时再获取产品的ID和新的顺序ID(orderid),组织成Json格式发送到服务器进行更新 。大体思路是这样,可能方法比较笨啊,如果各位有好的方法或建议请留言交流,谢谢!

如何实现:

1、客户端代码

    <script src="json2.js" type="text/javascript"></script>                                       //客户端用来转换Json字符串
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>                      //Jquery 文件

    <script src="jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>     //Jquery 排序插件
   
    <script>
        $(function() {

            //存储初始化时数据的排序顺序
            var orderid = new Array();
            $("tr:not(:first)").each(function() {
                orderid.push($(this).find('span').text());
            });

            //让Gridview支持拖拽功能,去掉表头不让其能够拖动
            $('#GridView1').sortable({ items: 'tr:not(:first)' });

            //保存按钮事件
            $("#newid").click(function() {
                var idorder = new Array(); //保存新的数据排序顺序
                var arr = new Array();       //保存顺序发生变化的数据,用于提交到服务器
                var proid, newid;
                initialize(idorder);

                //遍历查找顺序发生了变化的数据

                for (var key in orderid) {
                    if (orderid[key] != idorder[key]) {

                        proid = $('span[title="' + idorder[key] + '"]').parents("tr").children(":first").html();
                        newid = orderid[key];
                       //  alert($('span[title="' + idorder[key] + '"]').parents("tr").children(":first").html() + '        ' + orderid[key]);

                        arr.push(new orderinfo(proid, newid));
                    }

                }
              //  alert(JSON.stringify(arr));

                //发送Ajax请求
                $.post( 'Handler2.ashx', {data: JSON.stringify(arr)},function(){                
                 alert('Success');
                } );
            });
        })

        //用于初始化数组

        function initialize(obj) {
            $("tr:not(:first)").each(function() {
            obj.push($(this).find('span').text());
            });

        }

    //对象方式组织顺序变化的数据

        function orderinfo(proid, orderid) {
            this.proid = proid;
            this.orderid = orderid;
        }
    </script>

2、服务器端代码

     服务器处理客户端Post来的Json字符串,将其序列化为对象的格式。采用第三方插件(不知对否)Newtonsoft.Json.dll.

引用命名空间:using Newtonsoft.Json;

使用其JsonConvert.DeserializeObject<>()方法序列化数据

  string txt = context.Request["data"];

   List<info> products=JsonConvert.DeserializeObject<List<info>>(txt);

此处的info(类)是一个与客户端的orderinfo函数相对应(私有字段的名称需要一致,因为要做序列化) (注:这个地方的阐述可能有点问题)

 public  class info{
 
   public info()
   {
  
   }
      public info(string proid, string orderid)
        {
            this.ProID = proid;
            this.OrderID = orderid;
         
        }
      private string proid;

        public string ProID
        {
            get { return proid; }
            set { proid = value; }
        }

        private string orderid;

        public string OrderID
        {
            get { return orderid; }
            set { orderid = value; }
        }
 }

其它的就是更新到数据库了。就写到这里吧 !

本文作者:chunchill 来源:博客园|
CIO之家 www.ciozj.com 微信公众号:imciow
   
免责声明:本站转载此文章旨在分享信息,不代表对其内容的完全认同。文章来源已尽可能注明,若涉及版权问题,请及时与我们联系,我们将积极配合处理。同时,我们无法对文章内容的真实性、准确性及完整性进行完全保证,对于因文章内容而产生的任何后果,本账号不承担法律责任。转载仅出于传播目的,读者应自行对内容进行核实与判断。请谨慎参考文章信息,一切责任由读者自行承担。
延伸阅读