如何使用Angularjs+bootstrap+table多选支持单击行选中实现编辑、删除功能
小编给大家分享一下如何使用Angularjs+bootstrap+table多选支持单击行选中实现编辑、删除功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联专注于香河企业网站建设,成都响应式网站建设,商城系统网站开发。香河网站建设公司,为香河等地区提供建站服务。全流程按需定制开发,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务
最终实现效果:
index.html
选择 序号 用户 备注 操作 {{tddata}} 已选数量:{{count}}已选对象:{{selectData}}
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多选支持单击行选中实现编辑、删除功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网页名称:如何使用Angularjs+bootstrap+table多选支持单击行选中实现编辑、删除功能
本文路径:http://pwwzsj.com/article/gjhjij.html