angular表格的全选按钮和复选框以及分页的实现

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){
8if(obj){//勾选单个框时
9if(obj.checked){//如果勾选
10if(!$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){
18return item.checked;
19 });
20 }else{//勾选全选框时
21 angular.forEach($scope.queryPayList,function(target){
22if($scope.newColRegCondition.checkedAccountAll){//如果全选框勾选
23if(!$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 }
33if(obj){
34if(obj.certiType != null && obj.certiType == 'U' && obj.planFee > 0 && obj.checked){
35//调⽤接⼝检查勾选记录中是否有负数赔案(如果返回成功就跳转到下个页⾯。

否则就停在当前页⾯。

)
36 $$payClaimReg.refundIsPaid({compensateNo:pensateNo,payRefReason:obj.payRefReason},{
37 success:function (data) {
38if(data.content.resultCode=='0000'){
39 isDisabledCommon($scope.newColRegCondition.checkedRecords,obj,'disabled');
40 }else{
41 layerMsg(data.content.resultMsg);
42var refundIsPaid = false;
43 angular.forEach($scope.newColRegCondition.checkedRecords,function(data){
44 console.log('A'+obj.payRefReason.substr(1));
45if(pensateNo ==pensateNo && data.payRefReason == ('A'+obj.payRefReason.substr(1))){
46 refundIsPaid = true;
47 }
48 });
49if(!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*/
67var getSelectedList=function(){
68 angular.forEach($scope.queryPayList,function(data){
69if(data.checked){
70if(!$scope.findObj(data,$scope.newColRegCondition.checkedRecords)){
71 $scope.newColRegCondition.checkedRecords.push(data);
72
73 }
74 }
75else 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){
9if(ele['checked']) {
10 $scope.channelCheckedList.push(ele);
11 }
12 })
13 };
14//多选
15 $scope.selectedOne = function(item) {
16var flag = true;
17 $scope.channelCheckedList = [];
18 angular.forEach($scope.processingList, function(ele, index){
19if(ele['checked']) {
20 $scope.channelCheckedList.push(ele);
21 } else {
22 flag = false;
23 }
24 });
25if(flag) {
26 $scope.channelCheckedAll = true;
27 } else {
28 $scope.channelCheckedAll = false;
29 }
30 };。