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

Posted NANA_HOME

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 一切正常。

1 <div>
2                                             <ol class="dd-list" id="checkList">
3                                             <c:forEach items="${checkList}" var="item">
4                                                 <li id="${item.fieldName}">
5                                                     <span  class="btn btn-default">${item.chineseName}</span>
6                                                 </li>
7                                             </c:forEach>
8                                             </ol>
9                                         </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 才可以。这个问题一开始没发现,在测试时候发现了。

 1 <script>
 2 var typeId=${param.type};
 3   $(function() {
 4     $("#checkList").sortable({
 5           connectWith:"#uncheckList",
 6           delay:1,
 7           stop:function(){
 8               var checklist=$("#checkList").sortable("toArray");
 9               checklist=decodeURIComponent(checklist,true);
10               $.post("/sequence.json",{value:checklist,type:typeId});  
11           }
12     }).disableSelection();
13     
14     $("#uncheckList").sortable({
15          connectWith:"#checkList"
16     }).disableSelection();
17   });
18 </script>

 

 

 1     @ResponseBody
 2     @RequestMapping(value="/sequence",method=RequestMethod.POST)
 3     public Integer updateSequence(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
 4         Integer classify = getClassify(request);
 5         String value=this.getValue(request, "value");
 6         super.logParam(request);
 7         String[] attrs=StringUtils.split(value,",");
 8         List<CustomColumn> cclist=new ArrayList<CustomColumn>();
 9         for(int sequence=0,len=attrs.length;sequence<len;sequence++){
10             CustomColumn cc=new CustomColumn();
11             cc.setClassify(classify);
12             cc.setFieldName(attrs[sequence]);
13             cc.setSequence(sequence);
14             cclist.add(cc);
15         }
16         manager.savePointListCustomColumns(cclist, this.getCompanyId(request),classify);
17         return 1;
18     }

 

完美。

 

以上是关于jquery sortable 提交数据保存 使用问题的主要内容,如果未能解决你的问题,请参考以下文章

使用 JQuery Sortable 重新排序后如何将 .NET Gridview 行顺序保存到数据库

保存动态创建的 jQuery Connected Sortable Lists 的顺序

jquery sortable使用户能够在`n`秒后拖动元素

Rails jquery sortable无法正确保存位置

jquery ui sortable 拖动的时候,radio和checkbox的选中状态无法保存

使用 jQuery-UI Sortable 控制占位符高度