快捷導(dǎo)航

Angularjs+bootstrap+table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能

更新時(shí)間：2017年03月27日 11:20:03 作者：小思思smile

這篇文章主要介紹了Angularjs bootstrap table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能,需要的朋友可以參考下

最終實(shí)現(xiàn)效果：

最終效果

index.html

<!DOCTYPE html>
<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js"></script>
  <link  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>序號(hào)</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>已選數(shù)量：{{count}}</div>
 <div>已選對(duì)象：{{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');
     //初始化數(shù)據(jù)
      scope.datas = [
        {name:'admin1', rem:'備注'}, 
        { name:'admin2', rem:'備注'}, 
        { name:'admin3', rem:'備注'}
        ];
      scope.count = 0;//已選擇數(shù)量 
      scope.selectData = [];//已選對(duì)象
      //選擇單個(gè)（取消選擇單個(gè)
      scope.changeCurrent = function(current, $event) {
       //計(jì)算已選數(shù)量 true加， false減
        scope.count += current.checked ? 1 : -1;
        //判斷是否全選，選數(shù)量等于數(shù)據(jù)長(zhǎng)度為true
    scope.selectAll = scope.count === scope.datas.length;
        //統(tǒng)計(jì)已選對(duì)象
        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多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: