模糊查询

最新推荐文章于 2022-05-29 15:37:31 发布

nijiadalinge

最新推荐文章于 2022-05-29 15:37:31 发布

阅读量179

点赞数

分类专栏：移动开发

本文链接：https://blog.csdn.net/NIJIADALINGE/article/details/79085548

版权

移动开发专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="lib/js/angular/angular.min.js"></script>
		
		<script>
			angular.module("linrenjiang",[]).controller("conl",function($scope,$http){
				
				$scope.selname = "";
				$scope.selbumen = "";
				$scope.add_sex = '男';
				
				//网络数据加载
				$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid").then(function(d){
					$scope.stus = d.data;
				});
				
				//部门模糊查询
				$scope.mm = function(dname){
					if($scope.selbumen == undefined || $scope.selbumen ==""){
						return true;
					}
					if(dname.indexOf($scope.selbumen)>-1){
						return true;
					}
					return false;
				}
				
				//批量删除
				$scope.delall = function(){
					confirm("");
					for(var i=0;i<$scope.stus.length;i++){
						if($scope.stus[i].ck == true){
							$scope.stus.splice(i,1);
							i--;
						}
					}
				}
				
				//全选
				$scope.ckall = function(){
					console.log($scope.stus);
					for(var i=0;i<$scope.stus.length;i++){
						$scope.stus[i].ck = $scope.flag;
					}
				}
				
				//删除
				$scope.del = function(id){
					var index = 0;
					for(var i in $scope.stus){
						if($scope.stus[i].id == id){
							index = i;
						}
					}
					var f = confirm("确定删除吗?");
						if(f){
							$scope.stus.splice(index,1);
						}
				}
				
				//年龄
				$scope.getAge = function(bir){
					var b = new Date(bir).getYear();
					var nowb = new Date().getYear();
					return nowb-b;
				}
				
				//添加  判断
				$scope.save = function(){
					$scope.errors = [];
					
					if($scope.add_uname == undefined || $scope.add_uname == ""){
						$scope.val_uname = true;
						
						$scope.errors.push(1);
					}else{
						$scope.val_uname = false;
					}
					
					if($scope.add_salary == undefined || $scope.add_salary == ""){
						$scope.val_salary = true;
						
						$scope.errors.push(1);
					}else{
						$scope.val_salary = false;
					}
					
					var obj_d;
					
					if($scope.add_dname == undefined || $scope.add_dname == ""){
						$scope.errors.push(4);
					}else{
						if($scope.add_dname == "市场部"){
							obj_d = {id:1,name:$scope.add_dname};
						}else if($scope.add_dname == "研发部"){
							obj_d = {id:2,name:$scope.add_dname};
						}
					}
					
					if($scope.errors.length == 0){
						$scope.stus.push({
							"salary":$scope.add_salary,
							"birthday":$scope.add_birth.valueOf(),
							"department":obj_d,
							"gender":$scope.add_sex,
							"id":$scope.stus.length+100,
							"name":$scope.add_uname
						});
						
						$scope.add_uname = "";
						$scope.add_salary = "";
						$scope.add_birth = "";
						$scope.show_add = false;
					}
				}
				
			})
		</script>
	</head>
	<body ng-app="linrenjiang" ng-controller="conl">
	
			<center>
				<!--姓名查询 -->
			<input ng-model="selname" placeholder="根据姓名模糊查询" />
			
			<!--部门查询 -->
			<input ng-model="selbumen" placeholder="根据部门模糊查询" />
			
			<!--薪资排序-->
			<select ng-model="paixu">
				<option value="">根据薪资排序</option>
				<option value="+salary">薪资正序</option>
				<option value="-salary">薪资反序</option>
			</select>
			
			<!--批量删除-->
			<button ng-click="delall()">批量删除</button>
			
			<!--批量删除-->
			<button ng-click="showAdd = true">新增用户</button>
			
			<!--表格数据-->
			<table border="2px" width="800">
				
				<!--表头-->
				<tr>
					<td>
						<input type="checkbox" ng-model="flag" ng-click="ckall()" />
					</td>
					<td>员工姓名</td>
					<td>员工年龄</td>
					<td>员工性别</td>
					<td>员工薪资</td>
					<td>员工部门</td>
					<td>出生日期</td>
					<td>操作</td>
				</tr>
				
				<!--表格 -->
				<tr ng-repeat="d in stus | filter:{name:selname} | orderBy:paixu" ng-show="mm(d.department.name)">
					<td>
						<input type="checkbox" ng-model="d.ck" />
					</td>
					<td>{{d.name}}</td>
					<td>{{getAge(d.birthday)}}</td>
					<td>{{d.gender}}</td>
					<td>{{d.salary | currency:"￥:"}}</td>
					<td>{{d.department.name}}</td>
					<td>{{d.birthday | date:"yyyy-MM-dd hh:mm:ss"}}</td>
					
					<td>
						<button ng-click="del(d.id)">删除</button>
					</td>
				</tr>
			</table>
			
			<h1 ng-show="stus.length == 0">页面无操做数据</h1>
			
			<br />
			
			<br />
			
			
			<br />
			
			<br />
			<div ng-show="showAdd">
				<table border="1" cellspacing="0">
				<tr>
					<th>姓名</th>
					<td>
						<input type="text" ng-model="add_uname" placeholder="请输入姓名" />
						<span ng-show="val_uname">用户名不合法</span>
					</td>
				</tr>
				<tr>
					<th>工资</th>
					<td>
						<input type="text" ng-model="add_salary" placeholder="请输入工资" />
						<span ng-show="val_salary">工资不合法</span>
					</td>
				</tr>
				<tr>
					<th>生日</th>
					<td>
						<input type="date" ng-model="add_birth" />
					</td>
				</tr>
					
				<tr>
					<th>性别:</th>
					<td>
						<input type="radio" ng-model="add_sex" value="男"/>男
						<input type="radio" ng-model="add_sex" value="女"/>女
					</td>
				</tr>
				<tr>
					<th>部门</th>
					<td>
						<select ng-model="add_dname">
							<option value="">--请选择部门--</option>
							<option>市场部</option>
							<option>研发部</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>
						
					</th>
					<td>
						<button ng-click="save()" style="width: 150px;">保存</button>
					</td>
						
				</tr>
			</table>
			</div>
			
			</center>
	</body>
</html>

nijiadalinge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模糊查询

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="lib/js/angular/angular.min.js"&gt;&lt;/script&am
复制链接

扫一扫