Angular-ngtable联动全选

之前于Angular第三方插件ngTable的官网demo上看到的例子，但苦于demo中联动全选为选中所有，项目中并不适用，因此做了下小小的修改，修改目的只是为实现其功能，方法不敢苟同，若有更加简便的方法对此进行修改，请大方提出指正，本人不胜感激！

好了，废话不多说，先上官网demo，说明其中缺陷。http://ng-table.com/#/formatting/demo-header-cell-full

如demo中所示，官网给的例子中点击全选时，全选为选中所有选项（即图中3页数据全被选中），而并不是选中当前页面选项。

以常理来说这并不符合正常逻辑，容易给用户造成误解（如点击全选删除数据时只想删除当前页，但却删除全部数据）。

因此做以下修改：为还原demo的样子，请允许我用bootstrap先简单做一个静态页面出来：

html：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
    <div ng-app="myApp" class="container-fluid">
        <script type="text/ng-template" id="headerCheckbox.html">
            <input type="checkbox" ng-model="demo.checkboxes.checked" class="select-all" value="" />
        </script>
 
        <div class="row">
            <div class="col-md-6" ng-controller="index as demo">
                <h3>ngTable</h3>
                <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
                    <colgroup>
                        <col width="5%"/>
                        <col width="55%"/>
                        <col width="20%"/>
                        <col width="20%"/>
                    </colgroup>
                    <tr ng-repeat="row in $data">
                        <td header="'headerCheckbox.html'"><input type="checkbox" ng-model="demo.checkboxes.items[row.id]" /></td>
                        <td title="'Name'">{{row.name}}</td>
                        <td title="'Age'">{{row.age}}</td>
                        <td title="'Money'">{{row.money}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-table.js"></script>

然后是js中的修改。

js代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
var App = angular.module("myApp", ["ngTable"]);
 
App.controller("index", ['$scope', '$rootScope', 'NgTableParams',
  function($scope, $rootScope, NgTableParams) {
    /*
     * current:                 列表当前页
     * current_count:           列表当前页显示条数
     * self.checkboxes.checked: 全选
     * self.checkboxes.items:   当前选中个数用json形式保存
     * simpleList:              表格数据
     * */
    $rootScope.current = 1;
    $rootScope.current_count = 5;
    var self = this,
    simpleList = [
      {"id": 1, "name": "Nissim", "age": 41, "money": 454},
      {"id": 2, "name": "Mariko", "age": 10, "money": -100},
      {"id": 3, "name": "Mark", "age": 39, "money": 291},
      {"id": 4, "name": "Allen", "age": 85, "money": 871},
      {"id": 5, "name": "Dustin", "age": 10, "money": 378},
      {"id": 6, "name": "Macon", "age": 9, "money": 128},
      {"id": 7, "name": "Ezra", "age": 78, "money": 11},
      {"id": 8, "name": "Fiona", "age": 87, "money": 285},
      {"id": 9, "name": "Ira", "age": 7, "money": 816},
      {"id": 10, "name": "Barbara", "age": 46, "money": 44},
      {"id": 11, "name": "Lydia", "age": 56, "money": 494},
      {"id": 12, "name": "Carlos", "age": 80, "money": 193}
    ];
    self.checkboxes = {
      checked: false,
      items: {}
    };
 
    self.tableParams = new NgTableParams(
      {count: 5},
      {counts: [5, 10, 15], dataset: simpleList}
    );
 
    // watch 全选
    $scope.$watch(function() {
      return self.checkboxes.checked;
    }, function(value) {
      var total = ($rootScope.current_count * $rootScope.current > simpleList.length) ? simpleList.length : ($rootScope.current_count * $rootScope.current);
      angular.forEach(simpleList, function(data, index, array) {
        if (index >= ($rootScope.current - 1) * $rootScope.current_count && index < total) {
          self.checkboxes.items[array[index].id] = value;
        }
      });
    });
 
    // watch checkboxes.items
    $scope.$watch(function() {
      return self.checkboxes.items;
    }, function(values) {
      /**
       * checked:   选中个数
       * unchecked：未选中个数
       * total：    当前页总个数
       * length:    当前页范围
       */
      var checked = 0,
      unchecked = 0,
      total = ($rootScope.current_count * $rootScope.current > simpleList.length) ? simpleList.length - ($rootScope.current - 1) * $rootScope.current_count
      : $rootScope.current_count,
      length = ($rootScope.current_count * $rootScope.current > simpleList.length) ? simpleList.length : ($rootScope.current_count * $rootScope.current);
 
      angular.forEach(simpleList, function(data, index, array) {
        if (index >= ($rootScope.current - 1) * $rootScope.current_count && index < length) {
          checked   +=  (self.checkboxes.items[array[index].id]) || 0;
          unchecked += (!self.checkboxes.items[array[index].id]) || 0;
        }
      });
 
      if ((unchecked == 0) || (checked == 0)) {
        self.checkboxes.checked = (checked == total);
      }
 
      // grayed checkbox
      angular.element(document.getElementsByClassName("select-all")).prop("indeterminate", (checked != 0 && unchecked != 0));
    }, true);
 
    // watch 分页
    $scope.$watch(function() {
      return $rootScope.current;
    }, function(newValue, oldValue) {
      if (newValue != oldValue) {
        self.checkboxes.checked = false;
        self.checkboxes.items = {};
      }
    });
 
    // watch 当前页显示条数
    $scope.$watch(function() {
      return $rootScope.current_count;
    }, function(newValue, oldValue) {
      if (newValue != oldValue) {
        self.checkboxes.checked = false;
        self.checkboxes.items = {};
      }
    });
  }
]);

　　

如js代码中所示，多出了两个$rootScope值（current和current_count），因此在原有的ng-table.js中也需做相应修改：

在ng-table.js插件中541行的函数中，加入$rootScope。

并在该函数的

（1）this.page处添加$rootScope.current = params.page;以记录选中当前页；

（2）this.count处添加$rootScope.current_count = params.count;以记录当前显示条数；

至此修改完成，在点击全选时效果为选中当前页面选项，并且在修改显示条数的情况下进行选中清空处理。

demo地址：https://wang-sai.github.io/datalibrary/angular/ngtable-checkboxall.html

最后要说明的是，这个方法虽然可以完成相关功能，怎么说呢，完全是为实现功能添加的代码。

首先是改动了ngtable的源码，其次demo中的数据量并不大，在实际项目中数据量肯定是比较大的，少则几十页，多则上百页，有可能会出现$watch性能的问题。

 

posted on   StephenWong  阅读(3804)  评论(3)  编辑  收藏  举报

编辑推荐：
· 继承的思维：从思维模式到架构设计的深度解析
· 如何在 .NET 中 使用 ANTLR4
· 后端思维之高并发处理方案
· 理解Rust引用及其生命周期标识（下）
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
阅读排行：
· 35岁程序员的中年求职记：四次碰壁后的深度反思
· 当职场成战场：降职、阴谋与一场硬碰硬的抗争
· ShadowSql之.net sql拼写神器
· Excel百万数据如何快速导入？
· 无需WebView，Vue也能开发跨平台桌面应用

统计

点击右上角即可分享
微信分享提示
咦你想做什么 oAo
menu