web列表拖拽排序的实现

        最近用到了网页里面表格的每条数据拖拽排序，具体实现原理如下：

 

        前台实现方法，这里主要用到了jquery的拖拽排序组件，比如jqGrid（http://www.trirand.com/blog/），sortable（http://jqueryui.com/sortable/）,前台封装的组件用的都是很简单的，在这里就不多总结了，如果想深入研究拖拽的js实现原理，可以查看源码。

 

        后台设计，表中有个rank字段控制排序，每次找最大的一个+1。

 

        当前台列表展示的时候。

        将rank字段的附带着在每一个行：

                    如下：（<input type="hidden" value="${shpvo.rank " />" name="rnk"/>）

        本页的默认序列号放入一个数组中：

                   如下：

                        var seqlst= [];

                        $("input[name='rnk']").each(function(idx){

                                 seqlst.push($("input[name='rnk']").eq(idx).val());

                         })

                         $("#seqlst").val(seqlst.toString());   

 

           当执行拖拽排序的时候，每行存的id并不发生变化，但是从第一行到最后一行依次id顺序重新组成一个新的数组：

                         var ids = [];

                         for(var i = 0 , l = $("#ectableArea .zzp-table01-body tbody tr").length;i<l;i++){

                                   ids.push($("#ectableArea .zzp-table01-body tbody tr:eq(" + i + ")").find(".checkbox").attr("id"));

                          }

 

          以上两步就得到给后台传递的id数组和序号数组：执行ajax和后台交互：

                     $.ajax({

                           type: "POST",

                           url: "${ctx}/ship.do?method=savePageContentSort",

                          data:{"ids":ids.toString(),"sequence":seq.toString()},

                          dataType: "text",

                          timeout :5000,

                          cache :false,

                          async: true,

                          success: function(data){}

                   })

 

                 最后后台处理更新rank,简写实现代码如下：

                  String[] idList=ids.split(",");

                  String[] seqList=sequence.split(",");

                  List<OmShipTypeDO> list=new ArrayList<OmShipTypeDO>();

                  for(int i=0;i<idList.length;i++){

                        OmShipTypeDO obj=shipTypeDao.findById(Integer.parseInt(idList[i]));

                        //id对应的rank进行重置

                       obj.setRank(Byte.parseByte(seqList[i]));

                       list.add(obj);

                  }

                  shipTypeDao.saveOrUpdateAll(lst);

              以上的代码前台后台的写法都是简写，只是为了简易的说明拖拽排序的前台后台交互实现原理。

      

       

 

评论

1 楼 kely39 2013-05-31  

不错，顺便把demo也分享下