最終效果圖

有幾個坑這裏分享一下。

我用的是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);

 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 提交數據保存 使用問題