增删改查表格

前言

       bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。

        表格封装了3个版本，接下来给大家展示一下样式和代码。.

                                                                           这是添加信息，用路由

                                                这是修改用户信息页面，进行修改，名字默认不能修改

1.引进导包

<script type="text/javascript" src="../js/angular.js" ></script>
  <script type="text/javascript" src="../js/angular-route.js" ></script>

2.这是路由代码

var app = angular.module("myApp",['ngRoute']);
   app.config(["$routeProvider",function($routeProvider){
    $routeProvider
     .when("/addUser",{//添加用路由地址
      controller:"addCtrl",
      templateUrl:"addUser.html"
     })
     .when("/updatePwd/:name",{//修改密码用路由地址
      controller:"updateCtrl",
      templateUrl:"updatePwd.html"
     })
     .otherwise({redirectTo:"/addUser"});
   }]);

3.添加要用的html的效果代码

app.controller("myCtrl",function($scope,$location){
    //手动添加的数组
    $scope.users = [{
     "id":1,
     "name":"张三",
     "pwd":"123",
     "age":22,
     "sex":"男",
     "state":false
    },{
     "id":2,
     "name":"李四",
     "pwd":"456",
     "age":33,
     "sex":"女",
     "state":false
    },{
     "id":3,
     "name":"王五",
     "pwd":"789",
     "age":44,
     "sex":"男",
     "state":false
    }];
    //下拉搜索年龄相对的数组
    $scope.size = "--请选择--";
    $scope.ageSize = function(age,size){
     if(size == "--请选择--"){
      return true;
     }else{
      var arr = size.split("-");
      var ageMin = arr[0];
      var ageMax = arr[1];
      if (age>ageMin && age<ageMax){
       return true;
      }else{
       return false;
      }
     }
    }
    
    $scope.xingbie = "--请选择--";
    $scope.sexSize = function(sex,xingbie){
     if(xingbie == "--请选择--"){
      return true;
     }else{
       if(xingbie==sex){
        return true;
       }
     }
    }
    //批量删除
    $scope.deleteSel = function(){
     var arr = [];
     for (index in $scope.users){
      if($scope.users[index].state){
       arr.push($scope.users[index].name);
      }
     }
     if(arr.length>0){
      for(i in arr){
       for (i2 in $scope.users) {
        if(arr[i] == $scope.users[i2].name){
         $scope.users.splice(i2,1)
        }
       }
      }
     }else{
      alert("请选择");
     }
    }
    //判断全选
    $scope.selectAll = false;
    $scope.selectAllFun = function(){
     if($scope.selectAll){
      for (index in $scope.users) {
       $scope.users[index].state = true;
      }
     }else{
      for(index in $scope.users){
       $scope.users[index].state = false;
      }
     }
    }
    //判断是否全选
    $scope.checkSelect = function(index){
     var temp = 0;
     if($scope.users[index].state == true){
      temp++;
     }else{
      temp--;
     }
     if(temp == $scope.users.length){
      $scope.selectAll = true;
     }else{
      $scope.selectAll = false;
     }
     
     var haha = false;
     for(i in $scope.users){
      if($scope.users[i].state == true){
       
      }else{
       haha = true;
      }
     }
     if(haha){
      $scope.selectAll = false;
     }else{
      $scope.selectAll = true;
     }
    }
     //给按钮添加点击事件，根据传过来的参数，判断跳转到的路由地址
    $scope.goToPath = function(path){
     alert(path);
     $location.path(path);
    }

   });

4.这是添加和修改的代码

//添加用户控制器
   app.controller("addCtrl",function($scope){
    $scope.name = "";//双向数据绑定，获得页面输入的新用户信息
    $scope.pwd = "";
    $scope.age = "";
    $scope.sex = "";
    $scope.sub = function(){
     //遍历数据源，拿到最大的用户id
     $scope.idMax = 0;
     for(index in $scope.users){
      if($scope.users[index].id > $scope.idMax){
       $scope.idMax = $scope.users[index].id;
      }
     }
     //创建新用户对象
     var user = {
      id:$scope.idMax+1,
      name:$scope.name,
      pwd:$scope.pwd,
      age:$scope.age,
      sex:$scope.sex
     };
     //把新获得的用户对象添加到数据库数组中
     $scope.users.push(user);
    }
   });
   //修改密码控制
   app.controller("updateCtrl",function($scope,$routeParams){
    var name = $routeParams.name;//获得要修改的用户的用户名
    $scope.name = name;//将要修改用户的名字，赋值给双向数据绑定的页面用户名显示。
    $scope.pwd1 = "";//双向数据绑定用户输入的新密码
    
    //点击修改密码按钮，执行修改密码方法
    $scope.updatePwd = function(){
     //遍历数据源，通过比较数据源中用户名跟参数要修改的用户名一致，进行密码修改
     for(index in $scope.users){
      if($scope.users[index].name == name){
       //获得用户输入的密码，赋值给当前用户要修改的新密码。
       $scope.users[index].pwd = $scope.pwd1;
      }
     }
    }
   });

  </script>

5.html页面代码

<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   <h3>用户信息表</h3>
   <div>
    <input placeholder="用户名查询" size="10" ng-model="reach"/>&nbsp;
    年龄：<select ng-model="size">
     <option>--请选择--</option>
     <option>11-20</option>
     <option>21-30</option>
     <option>31-40</option>
     <option>41-50</option>
     <option>51-60</option>
    </select>&nbsp;
    性别：<select ng-model="xingbie">
     <option>--请选择--</option>
     <option>男</option>
     <option>女</option>
    </select>&nbsp;
    <input type="button" value="全部删除" ng-click="deleteSel()"/>
   <button ng-click="deleteSel()">批量删除</button>
   <br /><br />
   <table border="1 solid blue" cellspacing="0" cellpadding="1">
    <thead>
     <tr>
      <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
      <th>id</th>
      <th>用户名</th>
      <th>密码</th>
      <th>年龄</th>
      <th>性别</th>
      <th>操作</th>
     </tr>
    </thead>
    <tbody>
     <tr ng-repeat="user in users | filter:{name:reach}" ng-if="ageSize(user.age,size)&& sexSize(user.sex,xingbie)">
      <td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"/></td>
      <td>{{user.id}}</td>
      <td>{{user.name}}</td>
      <td>{{user.pwd}}</td>
      <td>{{user.age}}</td>
      <td>{{user.sex}}</td>
      <td><button ng-click="goToPath('/updatePwd/'+user.name)">修改密码</button></td>
     </tr>
    </tbody>
   </table>
   </div><br />
   <button class="addUser" ng-click="goToPath('/addUser')">添加用户</button><br /><br />
   
   <script type="text/ng-template" id="addUser.html">
    <form action="">
     <table border="1" cellspacing="1" cellpadding="10">
      <tr>
       <th>用户名：</th>
       <td><input ng-model="name" placeholder="请输入用户名" /></td>
      </tr>
      <tr>
       <th>密　码：</th>
       <td><input ng-model="pwd" placeholder="请输入密码" /></td>
      </tr><tr>
       <th>年　龄：</th>
       <td><input ng-model="age" placeholder="请输入年龄" /></td>
      </tr><tr>
       <th>性　别：</th>
       <td><input ng-model="sex" placeholder="请输入性别" /></td>
      </tr>
      <tr align="center">
       <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
      </tr>
     </table>
    </form>
   </script>
   <!-- 2.修改用户信息页面 -->
   <script type="text/ng-template" id="updatePwd.html">
    <form>
     <table border="1" cellspacing="1" cellpadding="10">
      <tr>
       <th>用户名：</th>
       <td><input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td>
      </tr>
      <tr>
       <th>旧密码：</th>
       <td><input ng-model="oldPwd" placeholder="请输入密码" /></td>
      </tr><tr>
       <th>新密码：</th>
       <td><input ng-model="pwd1" placeholder="请输入年龄" /></td>
      </tr><tr>
       <th>确　认：</th>
       <td><input ng-model="pwd2" placeholder="请输入性别" /></td>
      </tr>
      <tr align="center">
       <td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td>
      </tr>
     </table>
    </form>
   </script>

   
   <div ng-view>
    
   </div>
  </center>
 </body>