jquery sortable 提交数据保存 使用问题

 

最终效果图

 

有几个坑这里分享一下。

我用的是cloud-admin，一个bootstrap的CSS模板。

jQuery v2.0.3 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license */

jQuery UI - v1.11.1 - 2014-08-24

jquery 的sort 功能是在ui包里面的，所以需要UI包引入

一开始引入页面没效果，新建一个单独的页面正常使用，又放入完整页面又正常了，真不知道什么情况。反复试一下应该是没问题的。

试了以为是 ol 标签有问题，换 ul 好了又换回 ol 一切正常。

<div>
                                            <ol class="dd-list" id="checkList">
                                            <c:forEach items="${checkList}" var="item">
                                                <li id="${item.fieldName}">
                                                    <span  class="btn btn-default">${item.chineseName}</span>
                                                </li>
                                            </c:forEach>
                                            </ol>
                                        </div>

 

2个候选框，一个是已选择的，另外一个是未选择的，可以互相拖拽，这个地方用到 sortable  connectWith属性

$("#uncheckList").sortable({
        connectWith:"#checkList"
  }).disableSelection();

只提交已选择那个DIV里的项目保存到数据库。

这里的  sortable("toArray")  功能，需要注意一下，出来是个 以 , （逗号） 隔开的字符串，内容就是 li 属性 id 的内容。

而且出来的是按顺序排列的一串。如下图。

id="${item.fieldName}"

      

 

    但你直接通过ajax post是不行的，需要decodeURIComponent一下才能在服务器端正常获取到。剩下的就没什么问题。很 好用的一个功能。

 

checklist=decodeURIComponent(checklist,true);

 这里有个stop事件，需要注意的是，当是 connectWith 情况下，stop 需要修改为 update 才可以。这个问题一开始没发现，在测试时候发现了。

<script>
var typeId=${param.type};
  $(function() {
    $("#checkList").sortable({
          connectWith:"#uncheckList",
          delay:1,
          stop:function(){
              var checklist=$("#checkList").sortable("toArray");
              checklist=decodeURIComponent(checklist,true);
              $.post("/sequence.json",{value:checklist,type:typeId});  
          }
    }).disableSelection();
    
    $("#uncheckList").sortable({
         connectWith:"#checkList"
    }).disableSelection();
  });
</script>

 

 

    @ResponseBody
    @RequestMapping(value="/sequence",method=RequestMethod.POST)
    public Integer updateSequence(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
        Integer classify = getClassify(request);
        String value=this.getValue(request, "value");
        super.logParam(request);
        String[] attrs=StringUtils.split(value,",");
        List<CustomColumn> cclist=new ArrayList<CustomColumn>();
        for(int sequence=0,len=attrs.length;sequence<len;sequence++){
            CustomColumn cc=new CustomColumn();
            cc.setClassify(classify);
            cc.setFieldName(attrs[sequence]);
            cc.setSequence(sequence);
            cclist.add(cc);
        }
        manager.savePointListCustomColumns(cclist, this.getCompanyId(request),classify);
        return 1;
    }

 

完美。