Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
程序员文章站
2022-04-09 23:18:20
最终实现效果:
index.html
&l...
最终实现效果:
index.html
<!doctype html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> <script src="//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多选(全选)支持单击行选中实现编辑、删除功能,希望对大家有所帮助
上一篇: Angular动态添加、删除输入框并计算值实例代码
下一篇: vue中各组件之间传递数据的方法示例