zoukankan      html  css  js  c++  java
  • 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="stylesheet">
    
        <link rel="stylesheet" href="style.css">
        <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;
        };
    });
    

    在线Demo(plunker可能需要FQ):http://plnkr.co/edit/paA8Fz?p=preview

    源码下载:http://download.csdn.net/detail/opingu/9722685

  • 相关阅读:
    Python爬虫入门一之综述
    关于 PHP 7 你必须知道的五件事
    10个用于Web开发的最好 Python 框架
    如何用Python编写一个聊天室
    无需操作系统直接运行 Python 代码
    使用Python开发chrome插件
    Python下用Scrapy和MongoDB构建爬虫系统(1)
    python 目录操作
    用主题模型可视化分析911新闻(Python版)
    React Native通信机制详解
  • 原文地址:https://www.cnblogs.com/adjk/p/6842068.html
Copyright © 2011-2022 走看看