<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title></title> | |
<!-- | |
导入外部js、css | |
--> | |
<script src="js/jquery-3.2.1.min.js"type="text/javascript"charset="utf-8"></script> | |
<script src="js/angular.min.js"type="text/javascript"charset="utf-8"></script> | |
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> | |
<style type="text/css"> | |
fieldset { | |
padding: .35em .625em .75em; | |
margin: 0 2px; | |
border: 1px solid silver | |
} | |
legend { | |
padding: .5em; | |
border: 0; | |
width: auto | |
} | |
</style> | |
</head> | |
<body ng-app="myApp" ng-controller="myCtrl"> | |
姓名查询条件:<input type="text" id="name" /> | |
<select id="paixu" ng-options="x for x in orders" ng-model="selected" ng-init="selected=orders[0]" ng-change="change()"> | |
</select> | |
<br> 用户列表 | |
<br> | |
<table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped table-hover"> | |
<tr style="background: #999999;"> | |
<td><inputtype="checkbox"id="quan"ng-click="quan()" /></td> | |
<td>姓名</td> | |
<td>年龄</td> | |
<td>拼音</td> | |
<td>职位</td> | |
<td>操作</td> | |
</tr> | |
<tr ng-repeat="person in persons"> | |
<td><inputtype="checkbox"class="myCb" /></td> | |
<td>{{person.name}}</td> | |
<td>{{person.age}}</td> | |
<td>{{person.pinyin}}</td> | |
<td>{{person.zhiwei}}</td> | |
<td><ahref="#"ng-click="dele($index)">删除</a></td> | |
</tr> | |
</table> | |
<input type="button" id="piliang" value="批量删除" ng-click="deleAll()" /> | |
<input type="button" id="cha" value="查询" ng-click="cha()" /> | |
<input type="button" id="add" value="添加用户" ng-click="show()" /> | |
<form id="f"> | |
<fieldset id=""> | |
<legend>添加用户信息</legend> | |
姓名:<input type="text" name="name1" id="name1" /><br> 年龄: | |
<input type="text" name="age" id="age" /><br> 拼音: | |
<input type="text" name="pinyin" id="pinyin" /><br> 职位: | |
<input type="text" name="zhiwei" id="zhiwei" /><br> | |
<input type="button" value="保存" ng-click="save()" /> | |
</fieldset> | |
</form> | |
<!-- | |
逻辑代码 | |
--> | |
<script type="text/javascript"> | |
//默认下面添加页面隐藏 | |
$("#f").hide(); | |
var m = angular.module("myApp", []); | |
m.controller("myCtrl", function($scope) { | |
//初始化数据 | |
$scope.persons = [{ | |
"name": "张三", | |
"age": 20, | |
"pinyin": "zhangsan", | |
"zhiwei": "总经理" | |
}, { | |
"name": "李四", | |
"age": 25, | |
"pinyin": "lisi", | |
"zhiwei": "副经理" | |
}, { | |
"name": "王五", | |
"age": 22, | |
"pinyin": "wangwu", | |
"zhiwei": "工程师" | |
}]; | |
//----------查询----------- | |
$scope.cha = function() { | |
//取值 | |
var name = $("#name").val(); | |
// alert(name) | |
//判断 | |
if (name == "") { | |
alert("请输入姓名"); | |
return; | |
} | |
//敏感词 | |
if (name.indexOf("奥") != -1) { | |
alert("有敏感词"); | |
return; | |
} | |
var newPersons = []; | |
//是否含有 | |
for (var i = 0; i < $scope.persons.length; i++) { | |
var p = $scope.persons[i]; | |
if (p.name == name) { | |
newPersons.push(p); | |
} | |
} | |
//之后判断新的数组是否是为空 | |
if (newPersons.length == 0) { | |
alert("没有匹配项"); | |
return; | |
} | |
$scope.persons = newPersons; | |
} | |
//---------查询结束------- | |
//初始化下拉 | |
$scope.orders = ["按年龄正序排列", "按年龄倒序排列"]; | |
//change事件 | |
$scope.change = function() { | |
var pai = $("#paixu").val(); | |
alert("dd" + pai) | |
if (pai == "string:按年龄正序排列") { | |
$scope.persons.sort(function(a, b) { | |
if (a.age > b.age) { | |
return 1; | |
} else if (a.age < b.age) { | |
return -1; | |
} | |
return 0; | |
}); | |
} else { | |
$scope.persons.sort(function(a, b) { | |
if (a.age > b.age) { | |
return -1; | |
} else if (a.age < b.age) { | |
return 1; | |
} | |
return 0; | |
}); | |
} | |
} | |
//显示动画 | |
$scope.show = function() { | |
$("#f").show(1000); | |
} | |
//save | |
$scope.save = function() { | |
//验证年龄 | |
var age = $("#age").val(); | |
var b = isNaN(age); | |
if (b == true) { //如果不是一个数字就是 true | |
alert("年龄格式不正确") | |
return | |
} | |
//添加 | |
var name12 = $("#name1").val(); | |
var age = $("#age").val(); | |
var pinyin = $("#pinyin").val(); | |
var zhiwei = $("#zhiwei").val(); | |
var pe = { | |
"name": name12, | |
"age": age, | |
"pinyin": pinyin, | |
"zhiwei": zhiwei | |
}; //创建person对象 | |
$scope.persons.push(pe); | |
//消失 | |
$("#f").hide(); | |
} | |
//删除 | |
$scope.dele = function($index) { | |
var c = confirm("是否确认删除?"); | |
if (c == true) { | |
$scope.persons.splice($index, 1); | |
} | |
} | |
//批量删除 | |
$scope.deleAll = function() { | |
var b = confirm("是否确认删除?"); | |
if (b == true) { | |
//获取选中的复选框 | |
var cbs = $("input[type=checkbox][class=myCb]:checked"); | |
//遍历,删除复选框所在行 | |
for (var i = 0; i < cbs.length; i++) { | |
//取出每个复选框 | |
var cb = cbs[i]; | |
//删除所在行 | |
var tr = cb.parentNode.parentNode; | |
tr.remove(); | |
} | |
} | |
} | |
var flag = false; | |
$scope.quan = function() { | |
var cbs = $("input[type=checkbox]"); | |
if (flag == false) { | |
for (var i = 0; i < cbs.length; i++) { | |
var cb = cbs[i]; | |
cb.checked = true; | |
} | |
flag = true; | |
} else { | |
for (var i = 0; i < cbs.length; i++) { | |
var cb = cbs[i]; | |
cb.checked = false; | |
} | |
flag = false; | |
} | |
} | |
}) | |
</script> | |
</body> | |
</html> |
全选批量删除 添加 查询
最新推荐文章于 2024-02-25 22:13:22 发布