最终实现效果:
index.html
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link rel="stylesheet" href="style.css" rel="external nofollow" > <script src="script.js"></script> </head> <body ng-app="routerApp"> <div ng-controller="zdTable"> <table class="table table-bordered" > <thead> <tr> <th> <input type="checkbox" ng-model="selectAll" ng-change="changeAll()" /> 选择</th> <th>序号</th> <th>用户</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="row in datas" ng-init="outerIndex = $index" ng-click="changeCurrents(row, $event)"> <td><input type="checkbox" ng-model="row.checked" ng-click="changeCurrent(row, $event)" /></td> <td ng-bind="outerIndex+1"></td> <td ng-repeat="tddata in row | filterTable"> {{tddata}} </td> <td> <button type="button" class="btn btn-info" ng-click="zdTableEdit(row, $event)">编辑</button> <button type="button" class="btn btn-danger" ng-click="zdTableRemove(row, $event)">删除</button> </td> </tr> </tbody> </table> <div>已选数量:{{count}}</div> <div>已选对象:{{selectData}}</div> </div> </body> </html>
script.js
// Code goes here var routerApp = angular.module('routerApp', [ 'ngAnimate', 'ngSanitize', 'ui.bootstrap']); routerApp.controller('zdTable', [ '$scope', function(scope) { console.log('controller'); //初始化数据 scope.datas = [ {name:'admin1', rem:'备注'}, { name:'admin2', rem:'备注'}, { name:'admin3', rem:'备注'} ]; scope.count = 0;//已选择数量 scope.selectData = [];//已选对象 //选择单个(取消选择单个 scope.changeCurrent = function(current, $event) { //计算已选数量 true加, false减 scope.count += current.checked ? 1 : -1; //判断是否全选,选数量等于数据长度为true scope.selectAll = scope.count === scope.datas.length; //统计已选对象 scope.selectData = []; angular.forEach(scope.datas, function(item) { if(item.checked){ scope.selectData[scope.selectData.length] = item; } }); $event.stopPropagation();//阻止冒泡 }; //单击行选中 scope.changeCurrents = function(current, $event) { if(current.checked == undefined){ current.checked = true; }else{ current.checked = !current.checked; } scope.changeCurrent(current, $event); }; //全选(取消全选 scope.changeAll = function() { //console.log(scope.selectAll); angular.forEach(scope.datas, function(item) { item.checked = scope.selectAll; }); scope.count = scope.selectAll ? scope.datas.length : 0; if (scope.selectAll) { scope.selectData = scope.datas; } else { scope.selectData = []; } }; //编辑事件 scope.zdTableEdit = function(item, $event){ console.log(item); $event.stopPropagation();//阻止冒泡 }; //删除事件 scope.zdTableRemove = function(item, $event){ console.log(item); $event.stopPropagation();//阻止冒泡 }; } ]); //去掉不需要显示的字段 routerApp.filter('filterTable', function() { return function(obj) { var newObj = {}; for ( var i in obj) { var property = obj[i]; if(i != 'checked'){ newObj[i] = property; } } //console.log(newObj); return newObj; }; });
以上所述是小编给大家介绍的Angularjs bootstrap table多选(全选)支持单击行选中实现编辑、删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
本文向大家介绍iOS 多选删除功能附tableViewTips及单选删除,包括了iOS 多选删除功能附tableViewTips及单选删除的使用技巧和注意事项,需要的朋友参考一下 一、前言 这次分享并记录一下tableView的多选删除,并额外记录一下单选删除及tableView的设置小技巧。 二、想要实现的效果图如下: 1、先上原图 2、然后编辑图如下: 3、编辑步骤: 点击右上角按钮编辑,界面
本文向大家介绍jquery实现全选、全不选以及单选功能,包括了jquery实现全选、全不选以及单选功能的使用技巧和注意事项,需要的朋友参考一下 效果图: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!
本文向大家介绍AngularJS 实现购物车全选反选功能,包括了AngularJS 实现购物车全选反选功能的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了,具体代码如下所示; PS:下面给大家分享angularjs 购物车的代码,具体代码如下所示: 好了,代码到此结束。 总结 以上所述是小编给大家介绍的AngularJS 实现购物车全选反选功能,希望对大家有所帮助,如果
本文向大家介绍vue实现单选和多选功能,包括了vue实现单选和多选功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue实现单选和多选功能的具体代码,供大家参考,具体内容如下复制代码 vue实现多选功能 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍JS实现复选框的全选和批量删除功能,包括了JS实现复选框的全选和批量删除功能的使用技巧和注意事项,需要的朋友参考一下 如图示: 功能描述:在勾选了全选时,所有的商品都会勾选,在取消全选时,取消所有物品的勾选。如果点击批量删除,删除所勾选的商品。 如代码所示,全选/全不选的复选框添加onclick事件。每当点击了这个复选框时,触发ckAll事件。在ckAll()方法中,我们首先获得al
本文向大家介绍bootstrap multiselect 多选功能实现方法,包括了bootstrap multiselect 多选功能实现方法的使用技巧和注意事项,需要的朋友参考一下 官方教程 http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html 使用方法: 第一步引用样式以及相关JS 第二步
本文向大家介绍jquery实现简单的全选和反选功能,包括了jquery实现简单的全选和反选功能的使用技巧和注意事项,需要的朋友参考一下 首先我们看个简单的实例 下面再给大家分享一段基于jQuery实现checkbox列表全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的前端开发爱好者。 引
本文向大家介绍AngularJS 购物车全选/取消全选功能的实现方法,包括了AngularJS 购物车全选/取消全选功能的实现方法的使用技巧和注意事项,需要的朋友参考一下 刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1、勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定; 2、选中列表中的所有checkbox