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`秒后拖动元素