newperson购物车

最新推荐文章于 2022-11-12 16:27:00 发布

y126_Info

最新推荐文章于 2022-11-12 16:27:00 发布

阅读量291

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/y126_Info/article/details/79105357

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   <script type="text/javascript" src="js/angular.js" ></script>
   <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
   <style type="text/css">
       .main{
           width: 900px;
           height: 600px;
           margin: 0 auto;
       }

       .table1{
           width: 800px;
           height: 40px;
       }

        .cha{
           width: 190px;
           height: 25px;
           border-radius: 15px;
           background: url(img/图片1_03.gif) no-repeat right;
        }

        .xuan{
           width: 220px;
           height: 25px;
           margin-bottom: 20px;
        }

        .table2{
           width: 800px;
            height: 90px;
        }
   </style>
   <script>
       var app=angular.module("myApp",[]);
       app.controller("myCtrl",function($scope,$http){
           $scope.jsonFromNet="";
           $http({
               method:"get",
               url:"http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
           }).then(function success(response){
               $scope.jsonFromNet=response.data;
           },function error(response){
               alert("从网络获取失败！");
           });

           $scope.getAge=function(startDate){
               var date=new Date();
                var startDate=new Date(startDate);
                var newDate=date.getTime()-startDate.getTime();
                return Math.ceil(newDate/1000/60/60/24/365);
           }

           $scope.del=function(index){
               if(window.confirm("确定要删除吗？")){
                      $scope.jsonFromNet.splice(index,1);
                  }
           }

           //批量删除
                   $scope.pshan=function(){
                       //先判断多选框有没有被选中
                       var cks = document.getElementsByName("ck") ;
                       //进行便利如果是选中状态则删除
                       var j=0;
                       for(var i=0;i<cks.length;i++){
                         if(cks[i].checked){
                           if(window.confirm("确定要删除吗？")){
                                 $scope.jsonFromNet.splice((i-j),1);
                               j++;
                           }
                        }
                       }
                   }
       $scope.addisShow=false;
       $scope.add=function(){
            if($scope.addisShow){
               $scope.addisShow=false;
            }else{
               $scope.addisShow=true;
            }
       }

       $scope.tijiao=function(){
           var flag1=flag2=flag3=flag4=flag5=false;
           if($scope.g_name=="" && $scope.g_name==null){
               alter("姓名不能为空！");
               flag1=false;
           }else{
               flag1=true;
           }

           if($scope.g_age=="" && $scope.g_age==null){
                  alert("年龄不能为空");
                  flag2=false;
           }else if(isNaN($scope.g_age)){
                 alert("年龄必须为数字");
                 flag2=false;
           }else{
                 flag2=true;
           }



       }
          $scope.quanxuan=function(){
           var cks=document.getElementsByName("ck");
           for(var i=0; i<cks.length;i++){
               cks[i].checked=$scope.qx;
           }
          }


       });
   </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <div class="main">
       <table class="table1">
           <tr>
              <td><input ng-model="search" class="cha" type="text" placeholder="根据姓名模糊查询..." /></td>
              <td></td>
              <td><input ng-model="search2" class="cha" type="text" placeholder="根据部门模糊查询..." /></td>
              <td></td>
              <td>
               <select ng-model="sel" class="xuan">
                   <option value="">根据薪资排序</option>
                   <option value="salary">薪资正序排序</option>
                   <option value="-salary">薪资倒序排序</option>
               </select>
              </td>
              <td></td>
              <td><button ng-click="pshan()">批量删除</button></td>
           </tr>
       </table>
       <table class="table2" border="1" cellpadding="0" cellspacing="0">
           <thead>
               <th><input type="checkbox" ng-click="quanxuan()" ng-model="qx"/></th>
               <th>员工姓名</th>
               <th>员工年龄</th>
               <th>员工性别</th>
               <th>员工薪资</th>
               <th>出生日期</th>
               <th>部门名称</th>
               <th>删除</th>
           </thead>
           <tbody>
               <tr ng-repeat="d in jsonFromNet | filter:search | filter:search2 | orderBy:sel">
                  <td><input type="checkbox" name="ck" /></td>
                  <td>{{d.name}}</td>
                  <td>{{getAge(d.birthday)}}</td>
                  <td>{{d.gender}}</td>
                  <td>{{d.salary}}</td>
                  <td>{{d.birthday | date:"yy-MM-dd hh:mm:ss"}}</td>
                  <td>{{d.department.name}}</td>
                  <td><button ng-click="add()">添加</button><button ng-click="del($index)">删除</button ng-click="updata()">修改<button></button></td>
               </tr>
           </tbody>
       </table>
       <fieldset style="width: 300px; height: 120px;" ng-show="addisShow">
           <legend>添加</legend>
           <input type="text" placeholder="请输入姓名" ng-model="g_name"/><br/><br/>
           <input type="text" placeholder="请输入年龄" ng-model="g_age"/><br/><br/>
           <input type="text" placeholder="请输入性别" ng-model="g_sex"/><br/><br/>
           <input type="text" placeholder="请输入年龄" ng-model="g_salary"/><br/><br/>
           <input type="date" placeholder="请选择出生日期" ng-model="g_date"/><input type="datetime" placeholder="请选择出生天" ng-model="g_day"/><br/><br/>
           <input type="text" placeholder="请输入研发部门" ng-model="g_department"/><br/><br/>
            <input type="submit" value="提交" ng-click="tijiao()" />
       </fieldset>
      </div>
   </body>
</html>