Angular-ngtable联动全选
之前于Angular第三方插件ngTable的官网demo上看到的例子，但苦于demo中联动全选为选中所有，项目中并不适用，因此做了下小小的修改，修改目的只是为实现其功能，方法不敢苟同，若有更加简便的方法对此进行修改，请大方提出指正，本人不胜感激！
好了，废话不多说，先上官网demo，说明其中缺陷。http://ng-table.com/#/formatting/demo-header-cell-full
如demo中所示，官网给的例子中点击全选时，全选为选中所有选项（即图中3页数据全被选中），而并不是选中当前页面选项。
以常理来说这并不符合正常逻辑，容易给用户造成误解（如点击全选删除数据时只想删除当前页，但却删除全部数据）。
因此做以下修改：为还原demo的样子，请允许我用bootstrap先简单做一个静态页面出来：
html：
<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代码：
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性能的问题。
Angular-ngtable联动全选的更多相关文章
- 原生js的联动全选
开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...
- angular笔记_5(全选/反选)
全选和反选 BUG:当鼠标点击其中一个选项后,在点击全选按钮,该选项失效 <!DOCTYPE html><html lang="en"><head&g ...
- Angular实现购物车全选
直接上代码 <!DOCTYPE html> <html ng-app="myApp" > <head> <meta charset=&qu ...
- jQuery实现一个全选复选框联动效果
类似邮件列表里的复选框 要求双向联动 ☛ [实现]: <body> <div> <input type="checkbox" name="c ...
- 全选与单选chekbox的自定义实现(angular框架)
2017年7月4日,我原本可以像其他同时一样早点回家,玩几把王者荣耀,但是我没有,因为我选择留下来,写一篇博客. 项目中经常性的会遇到什么点击"全选"按钮,勾中所有"单选 ...
- jQuery应用实例3：全选、二级联动
全选: 这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8378221.html 如果使用jQuery则会方便很多: <!DOCTYPE html> ...
- angular实现表格的全选、单选、部分删除以及全部删除
昨天自己写了一小段js,在全选的时候有点儿小坑,然后,整理了一下.今天把它贴出来,希望以后还记得. 大家也可以去github上查看或下载:https://github.com/dreamITGirl/ ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- DEV控件中GridView中的复选框与CheckBox实现联动的全选功能
最初的界面图如图1-1(全选框ID: cb_checkall DEV控件名称:gcCon ): 要实现的功能如下图(1-2 1-3 1-4)及代码所示: 图1-2 图1-3 图1-4 O(∩_∩ ...
随机推荐
- 严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis
一个让我崩溃的问题 感谢:http://blog.csdn.net/itlionwoo/article/details/17523371
- 使用 lsyncd 本地目录实时备份
转自 https://segmentfault.com/a/1190000002737213 2.1安装lsyncd # rpm -ivh http://dl.fedoraproject.org/pu ...
- AngularJS多模块开发
angularJS中的多模块开发是指多个module模块开发,步骤为: 1. 确定主模块 var app=angular.module('myApp',[]); 2. 其他的子模块添加到主模块后 ...
- 解决weblogic.net.http.SOAPHttpsURLConnection incompatible with javax.net.ssl.HttpsURLConnection
1. 按照网上的办法,可以修改代码解决问题,但是由于我们使用的是别人的jar包,不能修改代码,: URL url = new URL(null, "https://www.baidu.&qu ...
- Swift - UIColor16进制编码与RGB格式互相转换
Swift UIColor 16进制编码转换RGB : 由于UI出图的时候,通常给的是16进制的编码颜色,我们在开发的时候需要将它转换为RGB格式,现在给出两种代码片段. 一.对UIColor进行扩展 ...
- PHP日期与时间
时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数.它也被称为 Unix 时间戳(Unix Timestamp).Unix时间戳(Unix timestamp),或称Uni ...
- Spring4.0编程式定时任务配置
看过很多定时调度的配置,大多使用XML配置,觉得比较麻烦,也比较老套.这里介绍一种基于spring4.0注解编程式配置定时任务,简单清晰,使用方便.. 至于引入spring相关jar这里不多说,直接切 ...
- JDK自带工具列表
JDK是一个功能强大的Java开发套装,它不仅仅为我们提供了Java运行环境,还给开发人员提供了许多有用的开发组件(位于bin目录中,如下图所示).仅仅使用JDK,就能够解决我们在Java开发过程中遇 ...
- Oracle的索引适用范围
若字段数据的重复率不是很高,而且数据量不是很大,考虑B树索引: 若字段数据的重复率较高,而且查询中有特定的查询方式(比如列之间有或,与等逻辑运算),则考虑位图索引: 若对列中的字段进行模糊查询或者语言 ...
- myeclipse 破解
Myeclipse 2014 破解补丁,首先需要先下载 Myeclipse 2014 官方安装文件,下载地址 http://www.jb51.net/softs/150886.html,然后下载此补丁 ...