JQuery雙列表交互模態窗口，列表項互相、上下移動

天氣：今天下雨

要作作這麼個東西：

 

原諒我沒有對angular有那麼深的理解，dom操做什麼的仍是JQuery方便

沒期望這文章能派上用場，只是記性很差，這些組件什麼的記錄一下，如今代碼寫的超級爛，也給之後找個樂子吧：

 1 // 模態窗口controller
 2 angular.module('app')
 3     .controller('SelDevCtrl', ['$scope', '$http','$state', function($scope,$http,$state) {
 4       $('#abox').on('click','ul li',function(){
 5         $('#abox ul li').removeClass('selItemActive');
 6         $(this).addClass('selItemActive');
 7       });
 8       $('#nbox').on('click','ul li',function(){
 9         $('#nbox ul li').removeClass('selItemActive');
10         $(this).addClass('selItemActive');
11       });
12       // 變換順序
13       // 按鈕上
14       $('#up').on('click',function(){
15         var index = $('#nbox .selItemActive').index();
16         // console.log(index);
17         if(index){
18           $('#nbox .selItemActive').insertBefore($('#nbox ul li').eq(index-1));
19         }
20       });
21       // 按鈕下
22       $('#down').on('click',function(){
23         var index = $('#nbox .selItemActive').index();
24         var len = $('#nbox ul li').size();
25         // console.log(len);
26         if(index < len - 1){
27           $('#nbox .selItemActive').insertAfter($('#nbox ul li').eq(index+1));
28         }
29       });
30       //從 待選 移動到 已選
31       $('#moveToRight').on('click',function(){
32         $('#nbox ul').append($('#abox .selItemActive').removeClass('selItemActive'));
33         $('#abox .selItemActive').remove();
34       });
35       //從 已選 移動到 待選
36       $('#moveToLeft').on('click',function(){
37         $('#abox ul').append($('#nbox .selItemActive').removeClass('selItemActive'));
38         $('#nbox .selItemActive').remove();
39       });
40       //保存按鈕
41       $('#save').on('click',function(){
42         var newnList;
43         $('#nbox ul li').each(function(index,domEle){
44           if (newnList) {
45               newnList += ",";
46               newnList += $(this).text().trim();
47           } else {
48             newnList = $(this).text().trim();
49           }
50         });
51           $http({
52             method: "get",
53             url: "/nms/assets/js/api/device/columns/save.do",
54               params: {
55                 type:        $('#selectedColumns').attr("layout-type"),
56                 columns:    newnList
57               }
58           }).
59           success(function(data, status) {
60             $('#selectColumns').modal('hide');
61             //TODO 刷新頁面
62             // alert($('#selectedColumns').attr("list-url"));
63             window.location.reload();
64           });
65       })
66 }]);

 html部分，能看出來主體仍是bootstrap的模態窗口：

 1 <!-- Modal -->
 2 <div class="modal fade slide-up disable-scroll" id="selectColumns" tabindex="-1" role="dialog" aria-hidden="false"  ng-controller="SelDevCtrl">
 3   <div class="modal-dialog ">
 4     <div class="modal-content-wrapper">
 5       <div class="modal-content">
 6         <div class="modal-header clearfix text-left">
 7           <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i>
 8                 </button>
 9           <h5>請選擇顯示的列</h5>
10         </div>
11         <div class="modal-body" style="width:100%;box-sizing:border-box;overflow:hidden;">
12           <div class="selColRow" style="">
13             <!-- 待選列 -->
14             <div class="selBox" id="abox">
15               <ul id="unselectColumns">
16                 <li ng-repeat="x in alist">
17                   {{x}}
18                 </li>
19               </ul>
20             </div>
21             <!-- 移動按鈕 -->
22             <div class="selBtnWrap" style="">
23               <div>
24                 <button class="selBoxBtn" style="margin-top:55px;" id="moveToRight">&gt;</button>
25                 <button class="selBoxBtn m-t-10" id="moveToLeft">&lt;</button>
26               </div>
27             </div>
28             <!-- 已選擇列 -->
29             <div class="selBox" id="nbox">
30               <ul id="selectedColumns" layout-type="device">
31                 <li ng-repeat="x in nlist">
32                   {{x}}
33                 </li>
34               </ul>
35             </div>
36             <!-- 按鈕 右側排序 -->
37             <div class="selBtnWrap">
38               <button class="selBoxBtn"  style="margin-top:55px;" id="up">上</button>
39               <button class="selBoxBtn m-t-10" id="down">下</button>
40             </div>
41             <div style="clear:both;"></div>
42           </div>
43           <!-- 按鈕 保存 取消 -->
44           <div style="width:100%;padding-top:30px;overflow:hidden;">
45             <div style="float:right;">
46               <button class="btn btn-complete btn-cons" id="save">保存</button>
47               <button class="btn btn-default btn-cons" data-dismiss="modal" aria-hidden="true">取消</button>
48             </div>
49           </div>
50         </div>
51       </div>
52     </div>
53   </div>
54 </div>

不管什麼辦法，能儘快解決問題就好