Angular终结版

最新推荐文章于 2020-06-10 11:53:35 发布

马云的恩师

最新推荐文章于 2020-06-10 11:53:35 发布

阅读量194

点赞数

分类专栏： Html+Css+JavaScript

本文链接：https://blog.csdn.net/gsc_19970804/article/details/78612569

版权

Html+Css+JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>09界月考练习</title>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css" />

<legend>添加用户信息</legend>

    姓名：
    <input type="text" id="shuru" /><br /> 年龄：
    <input type="text" id="shuruage" /><br /> 拼音：
    <input type="text" id="shurupinyin" /><br /> 职位：
    <input type="text" id="shuruzhiwei" /><br />
    <input type="button" value="保存" style="width: 100px;height: 50px;margin-top: 20px;margin-left: 50px;" ng-click="save()" />
   </fieldset>
  </form>

  <span style="margin-left: 350px;">姓名查询条件</span><input type="text" id="name" style="margin-top: 20px;" />
  <select id="sel" style="width: 200px;margin-left: 200px;" ng-click="paixv()">
   <option>按年龄倒序</option>
   <option>按年龄正序</option>
  </select><br />
  <span style="margin-left: 215px;">用户列表</span> <button style="height: 25px; width: 50px;margin-left: 600px; margin-top: 30px;" ng-click="fanxuan()">反选</button>
  <button style="height: 25px; width: 80px; margin-left: 10px;" ng-click="delAll()">批量删除</button>
  <table border="1px" cellpadding="0px" cellspacing="0px" style="width: 800px;margin-left: 215px;" class="table-striped table-hover">

    <td>{{x.name}}</td>
    <td>{{x.age}}</td>
    <td>{{x.pinyin}}</td>
    <td>{{x.zhiwei}}</td>
    <td><a href="#" ng-click="del($index)">删除</a></td>
   </tr>

</table>

$("#forms").hide();

    //初始化数据
    $scope.datas = [{
     "name": "张三",
     "age": 45,
     "pinyin": "zhangsan",
     "zhiwei": "总经理"
    }, {
     "name": "李四",
     "age": 43,
     "pinyin": "lisi",
     "zhiwei": "设计师"
    }, {
     "name": "王五",
     "age": 40,
     "pinyin": "wangwu",
     "zhiwei": "工程师"
    }, {
     "name": "赵六",
     "age": 33,
     "pinyin": "zhaoliu",
     "zhiwei": "工程师"
    }, {
     "name": "周七",
     "age": 32,
     "pinyin": "zhouqi",
     "zhiwei": "人事经理"
    }];
    //添加界面
    $scope.add = function() {

$("#forms").show(1000);

}

    //查询按钮逻辑
    $scope.chaxun = function() {
     var flags = false;
     $scope.cxdatas = [];
     //alert("");
     var name = $("#name").val();
     //非空判断
     if (name == "") {
      //初始化数据
      $scope.datas = [{
       "name": "张三",
       "age": 45,
       "pinyin": "zhangsan",
       "zhiwei": "总经理"
      }, {
       "name": "李四",
       "age": 43,
       "pinyin": "lisi",
       "zhiwei": "设计师"
      }, {
       "name": "王五",
       "age": 40,
       "pinyin": "wangwu",
       "zhiwei": "工程师"
      }, {
       "name": "赵六",
       "age": 33,
       "pinyin": "zhaoliu",
       "zhiwei": "工程师"
      }, {
       "name": "周七",
       "age": 32,
       "pinyin": "zhouqi",
       "zhiwei": "人事经理"
      }];
      alert("请输入姓名");
      return
     }
     //敏感词判断
     if (name.indexOf("习") != -1) {
      var indexs = name.indexOf("习");
      var mgz = name.substring(indexs, indexs + 1);
      alert("“" + mgz + "” 是敏感字不能查询");
      return;
     }

     //遍历数组查询
     for (var i = 0; i < $scope.datas.length; i++) {
      var names = $scope.datas[i].name;
      //alert(names);
      if (names.indexOf(name) != -1) {
       $scope.cxdatas.push($scope.datas[i]);
       flags = true;
      }
     }

     if (flags == false) {
      alert("未找到匹配项");
      return;
     } else {
      $scope.datas = $scope.cxdatas;
      $("#name").val("");
     }

}

    //排序
    $scope.paixv = function() {
      var types = $("#sel option:selected").text();
      //console.log(types);

      if (types == "按年龄倒序") {
       $scope.datas.sort(function(a, b) {
        if (a.age > b.age) {
         return -1;
        } else if (a.age < b.age) {
         return 1;
        }

return 0;

});
}

      if (types == "按年龄正序") {
       $scope.datas.sort(function(a, b) {
        if (a.age > b.age) {
         return 1;
        } else if (a.age < b.age) {
         return -1;
        }

return 0;

});
}

     }
     //添加用户
    $scope.save = function() {
     var name = $("#shuru").val();
     var age = $("#shuruage").val();
     var pinyin = $("#shurupinyin").val();
     var zhiwei = $("#shuruzhiwei").val();
     //判断数据类型
     var b = isNaN(age);
     if (name == "" || age == "" || pinyin == "" || zhiwei == "") {
      alert("输入项必填");
      return;
     }
     if (b) {

      alert("年龄格式错误");
      return;
     }

     $scope.datas.unshift({
      "name": name,
      "age": age,
      "pinyin": pinyin,
      "zhiwei": zhiwei
     });

$("#forms").hide(1000);
}

//删除
$scope.del = function($index) {

     var queren = confirm("确认删除吗？");
     if (queren) {
      $scope.datas.splice($index, 1);
      setTimeout("alert('删除成功')", 200);

}

//全选
$scope.quanxuan = function() {

    //反选
    $scope.fanxuan = function() {
     var dx = $("input[id='checks']");
     for (var i = 0; i < dx.length; i++) {
      var isno = dx[i].checked;
      if (isno) {
       dx[i].checked = false;
      } else {
       dx[i].checked = true;
      }
     }
    }

    //批量删除
    $scope.delAll = function() {
     $scope.szz = [];
     $scope.trs = [];
     var dx = $("input[id='checks']");
     for (var i = 0; i < dx.length; i++) {
      var isno = dx[i].checked;
      if (isno) {
       var cb = dx[i];
       var tr = cb.parentNode.parentNode;
       var index = $(tr).index();
       //alert(index);
       $scope.trs.push(tr);
       $scope.szz.push(index);
      }
     }
     console.log($scope.szz);
     if ($scope.szz.length > 0) {
      var xzz = confirm("确定删除吗？");
      if (xzz) {

       //       for (var i = 0; i < $scope.szz.length; i++) {
       //        //console.log($scope.szz[i] - 1)
       //        $scope.datas.splice($scope.szz[i] - 1, 1)
       //         //console.log($scope.datas)
       //
       //        for (var j = i; j <= i; j++) {
       //
       //         var a = $scope.trs[j];
       //         a.remove();
       //        }
       //
       //       }

for (var j = 0; j < $scope.trs.length; j++) {

        var a = $scope.trs[j];
        a.remove();
       }
       setTimeout("alert('删除成功')", 200);

}

     } else {
      alert("请先选中后在进行批量删除");
     }

    }
   })
  </script>
</body>

</html>