当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

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

2018年04月30日  | 移动技术网IT编程  | 我要评论

最终实现效果：

最终效果

<!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多选（全选）支持单击行选中实现编辑、删除功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网