angular 表格的全选按钮和复选框以及分页的实现
1 <div class="venus_table">
2 <table class="table table-bordered">
3 <thead>
4 <tr>
5 <th>
6 <input type="checkbox" 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" ></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
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 };