angular 表格的全選按鈕和複選框以及分頁的實現

 1  <div class="venus_table">
 2             <table class="table table-bordered">
 3                 <thead>
 4                 <tr>
 5                     <th>
 6                         <input type="checkbox" style="height: 13px;" ng-change="checkedBoxChanged()" ng-model="newColRegCondition.checkedAccountAll"  ng-disabled="newColRegCondition.status.checkedClaimAll_disabled">
 7                     </th>
 8                     <th>結算單號</th>
 9                     <th>收款人名稱</th>
10                     <th>幣種</th>
11                     <th>結算金額</th>
12                     <th>收款人帳號</th>
13                     <th>開戶行名稱</th>
14                     <th>結算單生成日期</th>
15                     <th>制單人</th>
16                     <th>操做</th>
17                 </tr>
18                 </thead>
19                 <tbody>
20                 <tr ng-repeat="d in queryPayList" ng-class="{true:'venus_table_check',false:''}[d.checked]">
21                     <td ng-class="d.selectedClass" ng-mouseover="display=true;" ng-mouseleave="display=false;">
22                         <input  type="checkbox" ng-change="checkedBoxChanged(d)" ng-model="d.checked"
23                                 ng-disabled="d.disabled" style="zoom:110%;"></td>
24                     <td><a ng-click="refundNum(d)">{{d.payrefno}}</a></td>
25                     <td>{{d.accountname}}</td>
26                     <td>{{d.currency}}</td>
27                     <td>{{d.billfee }}</td>
28                     <td>{{d.accountcode}}</td>
29                     <td>{{d.bankname}}</td>
30                     <td>{{d.packagedate}}</td>
31                     <td>{{d.packageName}}</td>
32                     <td>  <a href="" ng-click="getback(d)"><i class="glyphicon glyphicon-pencil color-oranage"></i>打回</a></td>
33                 </tr>
34                 </tbody>
35             </table>
36         </div>
37         <div class="row list_content_bottom" ng-if="pagination.totalItems>0">
38             <span class="text-left" align="bottom">共{{pagination.totalItems}}條記錄</span>
39             <pagination
40                     ng-if="pagination.totalItems>pagination.pageSize"
41                     ng-model="pagination.pageIndex"
42                     class="pagination-sm pull-right"
43                     total-items="pagination.totalItems"
44                     page="pagination.pageIndex"
45                     items-per-page="pagination.pageSize"
46                     max-size="pagination.maxSize"
47                     previous-text="上一頁"
48                     next-text="下一頁"
49                     first-text="首頁"
50                     last-text="末頁"
51                     class=""
52                     ng-click="collectionSearch('page')"
53                     style="margin: 0 20px 20px 0;"
54                     boundary-links="true"
55                     on-select-page="onSelectPage(page)">
56             </pagination>
57         </div>

後臺js的實現

 1   /**
 2          * 勾選全選框 或者 單個框時
 3          * @param obj
 4          */
 5         $scope.newColRegCondition.checkedRecords=[];
 6         $scope.newColRegCondition.checkedAccountAll=false;
 7         $scope.checkedBoxChanged=function(obj){
 8             if(obj){//勾選單個框時
 9                 if(obj.checked){//若是勾選
10                     if(!$scope.findObj(obj,$scope.newColRegCondition.checkedRecords)){//判斷數組中是否存在該條案件
11                         $scope.newColRegCondition.checkedRecords.push(obj);//記錄此條數據
12                     }
13                 }else{//若是取消勾選
14                     $scope.deleteObj(obj,$scope.newColRegCondition.checkedRecords,'certiID');//刪除此條記錄
15                 }
16                 //判斷全選框是否應該勾選或取消
17                 $scope.newColRegCondition.checkedAccountAll=$scope.queryPayList.every(function(item){
18                     return item.checked;
19                 });
20             }else{//勾選全選框時
21                 angular.forEach($scope.queryPayList,function(target){
22                     if($scope.newColRegCondition.checkedAccountAll){//若是全選框勾選
23                         if(!$scope.findObj(target,$scope.newColRegCondition.checkedRecords)){//先判斷當前勾選數據是否已經存在記錄列表中
24                             $scope.newColRegCondition.checkedRecords.push(target);//記錄此條數據
25                             target.checked = true;
26                         }
27                     }else{//若是未勾選
28                         $scope.deleteObj(target,$scope.newColRegCondition.checkedRecords,'payrefno');//刪除對應記錄
29                         target.checked = false;
30                     }
31                 });
32             }
33             if(obj){
34                 if(obj.certiType != null && obj.certiType == 'U' && obj.planFee > 0 && obj.checked){
35                     //調用接口檢查勾選記錄中是否有負數賠案(若是返回成功就跳轉到下個頁面。不然就停在當前頁面。)
36                     $$payClaimReg.refundIsPaid({compensateNo:obj.compensateNo,payRefReason:obj.payRefReason},{
37                         success:function (data) {
38                             if(data.content.resultCode=='0000'){
39                                 isDisabledCommon($scope.newColRegCondition.checkedRecords,obj,'disabled');
40                             }else{
41                                 layerMsg(data.content.resultMsg);
42                                 var refundIsPaid = false;
43                                 angular.forEach($scope.newColRegCondition.checkedRecords,function(data){
44                                     console.log('A'+obj.payRefReason.substr(1));
45                                     if(data.compensateNo ==obj.compensateNo && data.payRefReason == ('A'+obj.payRefReason.substr(1))){
46                                         refundIsPaid = true;
47                                     }
48                                 });
49                                 if(!refundIsPaid){
50                                     $scope.deleteObj(obj,$scope.newColRegCondition.checkedRecords,'payrefno');//刪除此條記錄
51                                     obj.checked = false;
52                                 }
53                             }
54                         },
55                         error:function () {
56 
57                         }
58                     });
59                 }
60             }
61             getSelectedList()
62 
63         };
64         /**
65          *將勾選數據放入記錄
66          */
67         var getSelectedList=function(){
68             angular.forEach($scope.queryPayList,function(data){
69                 if(data.checked){
70                     if(!$scope.findObj(data,$scope.newColRegCondition.checkedRecords)){
71                         $scope.newColRegCondition.checkedRecords.push(data);
72 
73                     }
74                 }
75                 else if($scope.findObj(data,$scope.newColRegCondition.checkedRecords)){
76                     $scope.deleteObj(data,$scope.newColRegCondition.checkedRecords,'payrefno')
77                 }
78             });
79             console.log($scope.newColRegCondition.checkedRecords)
80 
81         };

簡單實現：

 1       //全選
 2         $scope.selectedAll = function() {
 3             console.log($scope.channelCheckedAll);
 4             $scope.channelCheckedList = [];
 5             angular.forEach($scope.processingList, function(ele, index) {
 6                 ele['checked'] = $scope.channelCheckedAll;
 7             });
 8             angular.forEach($scope.processingList, function(ele, index){
 9                 if(ele['checked']) {
10                     $scope.channelCheckedList.push(ele);
11                 }
12             })
13         };
14         //多選
15         $scope.selectedOne = function(item) {
16             var flag = true;
17             $scope.channelCheckedList = [];
18             angular.forEach($scope.processingList, function(ele, index){
19                 if(ele['checked']) {
20                     $scope.channelCheckedList.push(ele);
21                 } else {
22                     flag = false;
23                 }
24             });
25             if(flag) {
26                 $scope.channelCheckedAll = true;
27             } else {
28                 $scope.channelCheckedAll = false;
29             }
30         };