Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能


Posted in Javascript onMarch 27, 2017

最终实现效果:

Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能

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多选(全选)支持单击行选中实现编辑、删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
DOM 中的事件处理介绍
Jan 18 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
three.js 入门案例详解
Jan 23 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
JS闭包用法实例分析
Mar 27 #Javascript
vue 2.0组件与v-model详解
Mar 27 #Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 #Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 #Javascript
javascript实现下雨效果
Mar 27 #Javascript
HTML的select控件美化
Mar 27 #Javascript
JS实现的点击表头排序功能示例
Mar 27 #Javascript
You might like
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python反射的用法实例分析
2018/02/11 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Django日志及中间件模块应用案例
2020/09/10 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
奥巴马演讲稿
2014/01/08 职场文书
班长自荐书范文
2014/02/11 职场文书
小学生期末评语大全
2014/04/21 职场文书
科级干部培训心得体会
2016/01/06 职场文书
2019年大学推荐信
2019/06/24 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL