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性能的问题。
最新文章
- 6个奇葩的(hello,world)C语言版(转)
- 【转载】8天学通MongoDB——第三天 细说高级操作
- JS 打印功能代码可实现打印预览、打印设置等
- neutron 网络配置flat模式
- Android版本更新之本地数据库更新
- 四元数(Quaternion)和旋转(转)
- 英语语法最终珍藏版笔记-17名词性-主语-宾语-同位语-表语-that从句
- [转载]tcp可靠性的好文
- The server quit without updating PID file (mysql.pid)一次意外mysql停止运行备忘录
- leetcode算法刷题(四)——动态规划(二)
- 一次Oracle宕机切换后产生ORA错误的处理过程
- android自定义xmls文件属性
- NS3系列——eclipse + NS3环境搭建
- Excel基本操作
- oracle sql 获取本季度所有月份,上季度所有月份
- 关于vuex和Promise reject 或.catch 的报错处理。
- Azure REST API (4) 在Python环境下,使用Azure REST API
- Hibernate 注释用法
- 通过wlst工具创建weblogic11g域单节点包括服务与被管服务
- js备忘录2
热门文章
- Android Studio在创建/导入项目的时候,一直处于building “XXX”gradle project info的解决办法
- session超时时间设置方法
- jQuery的.bind()、.live()和.delegate()的区别
- NavigationController
- Apache与Nginx对客户端请求的处理机制对比
- 说说Spring中的WebDataBinder
- ajax实例2
- Js中caller和callee的区别
- python excel操作
- WebForm控件Repeater