angularjs实现增删改查

最新推荐文章于 2019-03-01 22:20:01 发布
最新推荐文章于 2019-03-01 22:20:01 发布
阅读量365 收藏
点赞数
分类专栏： AngularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39010381/article/details/75043808
版权 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'AjaxEmp.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="lesson01/angular.min.js"></script>
	<style type="text/css">
		table{
			border-color:#FFDAB9;
			background: #E0FFFF;
		}
		#upDate{
			border-radius:10px;
			display:none;width:345px;heigth:385px;
			background:linear-gradient(to bottom,#1E90FF,#00BFFF);
			position: absolute;left: 47%;top: 23%;
			font-size:20px;
		
		}
		
		#addDiv{
			border-radius:10px;
			display:none;width:345px;heigth:385px;
			background:linear-gradient(to bottom,#1E90FF,#00BFFF);
			position: absolute;left: 47%;top: 23%;
			font-size:20px;
		
		}
	</style>
	<script type="text/javascript">
		
	
	</script>
  </head>
  <body>
  	
 	<div ng-app="myEmpApp" ng-controller="myEmpController">
	   	<input type="text"  id="ename" ng-model="ename">
	   	<input  type="button" value="查询" ng-click="query(1)"/>
	   	<input type='button'  value='增加' id="addBtn" οnclick="document.getElementById('addDiv').style.display='block'"/>
	
   <table id="tb" >
   		<thead>
   	  <tr><td>EMPNO</td><td>ENAME</td><td>JOB</td><td>MGR</td><td>HIREDATE</td><td>NEWSAL</td>
   		<td>COMM</td><td>DEPTNO</td><td>EMAIL</td><td>SEX</td><td>操作</td>
   	  </tr>
   	  	<tr ng-repeat="t in emp"><td>{{t.empno}}</td><td>{{t.ename}}</td><td>{{t.job}}</td>
   	  	<td>{{t.mgr}}</td><td>{{t.hiredate}}</td><td>{{t.newsal}}</td><td>{{t.comm}}</td>
   	  	<td>{{t.deptno}}</td><td>{{t.email}}</td><td>{{t.sex}}</td><td><input type="button" empno="{{t.empno}}" value="删除" ng-click="dele()"/>
   		<input type="button" empno="{{t.empno}}" value="修改" ng-click="date()"/></td>
   	  </tr>
   	  </thead>
   </table>
     <input type="image" src="${pageContext.request.contextPath}/lesson05/imgs/18.gif" ng-click="query(1)">
   		<input type="image" src="${pageContext.request.contextPath}/lesson05/imgs/20.gif" ng-click="query(prePage)">
   		当前页：<span>{{myCurpage}}</span>总页：{{totalCount}}<span></span>总条数{{totalPage}}<span></span>
   		<input type="image" src="${pageContext.request.contextPath}/lesson05/imgs/16.gif" ng-click="query(nextPage)">
   		<input type="image" src="${pageContext.request.contextPath}/lesson05/imgs/14.gif" ng-click="query(totalCount)">
  
   		
		<div id="addDiv" style="display:none">
		                 
		<input id="xBtn" type="button" value="×" οnclick="document.getElementById('addDiv').style.display='none'"/><br/>
		  <form id="formAdd">
		     员工编号：<input id="empno"  type="text" name="empno" ng-model="empno"><br/>
		     员工姓名：<input id="ena" type="text" name="ename" ng-model="name"><br/>
		     员工职位：<input id="job" type="text" name="job" ng-model="job"><br/>
		     员工领导：<input id="mgr" type="text" name="mgr" ng-model="mgr"><br/>
		     雇佣日期：<input id="hiredate" type="text" name="hiredate" ng-model="hiredate"><br/>
		    员工工资：<input id="newsal" type="text" name="newsal" ng-model="newsal"><br/>
		    员工奖金：<input id="comm" type="text" name="comm" ng-model="comm"><br/>
		    员工部门: <input id="deptno" type="text" name="deptno" ng-model="deptno"><br/>
		    员工邮件：<input id="email" type="text" name="email" ng-model="email"><br/>
		    员工性别：<input id="sex" type="text" name="sex" ng-model="sex"><br/>
		             
		   <input type="button" value="增加" id="add" ng-click="add()"/>   <input type="reset"  value="重置"/>
		</form>
      </div>	
      
      <!-- 修改div -->
   			<div id="upDate" style="display:none">
				                
				<input type="button" value="×" οnclick="document.getElementById('upDate').style.display='none'"/><br/>
				<form id="upDateForm">
				<input id="empno1"  type="hidden" name="empno" ng-model="e.empno"><br/>
			     员工姓名：<input id="ena" type="text"  ng-model="e.ename"><br/>
			     员工职位：<input id="job" type="text"  ng-model="e.job"><br/>
			     员工领导：<input id="mgr" type="text"  ng-model="e.mgr"><br/>
			     雇佣日期：<input id="hiredate" type="text"  ng-model="e.hiredate"><br/>
			    员工工资：<input id="newsal" type="text"  ng-model="e.newsal"><br/>
			    员工奖金：<input id="comm" type="text"  ng-model="e.comm"><br/>
			    员工部门: <input id="deptno" type="text"  ng-model="e.deptno"><br/>
			    员工邮件：<input id="email" type="text"  ng-model="e.email"><br/>
			    员工性别：<input id="sex" type="text"  ng-model="e.sex"><br/>
			             
			        <input type="button" value="保存" id="updateBtn" ng-click="update()"/>   <input type="reset"  value="重置"/>
			     </form>   
			</div>
      
     </dvi> 
    
  </body>
  <script type="text/javascript">
 	
  	
  
  
  	//获取到app对象module
  	var myApp=angular.module("myEmpApp",[]);
  	//controller层调用service 控制层参数就是提供服务的参数
  	//所有service都是$开头的变量
  	//$scope 作用域 $location 路径服务 $http发送ajax $sce权限控制 $timeout表示定时服务
  	myApp.controller("myEmpController",function($scope,$http){
  		$scope.ename="";
  			//当前页
	   $scope.myCurpage=1;
		 //总数
       $scope.totalPage=0;
       //总页数
       $scope.totalCount=0;
       //下一页
       $scope.nextPage=0;
       //上一页
      $scope.prePage=1;
      
      //--点击修改把要修改的数据带给修改div---------------------------------------------------------------------------
      $scope.date=function(){
      	document.getElementById('upDate').style.display='block';
      	var e=$scope.emp;
      	var empno=event.srcElement.getAttribute("empno");
      	for(var i=0;i<e.length;i++){
	  		if(e[i].empno==empno){
	  			$scope.e=e[i];
	  				break;
	  				}
	  			}
      	
      
      }
      
      
      
      
      
      //修改-------------------------------------------------------------------
  		$scope.update=function(){
  			//获取的是修改form表单的值，用 个对象封装起来
  			var pdata={empno:$scope.e.empno,ename:$scope.e.ename,job:$scope.e.job,mgr:$scope.e.mgr,hiredate:$scope.e.hiredate,
  					   newsal:$scope.e.newsal,comm:$scope.e.comm,deptno:$scope.e.deptno,email:$scope.e.email,sex:$scope.e.sex
  			};
  			debugger
  			
  			$http({
  			url:'${pageContext.request.contextPath}/update',
  			//传入一个对象到controller层
  			params:pdata
	  		}).then(function(responseJson){
	  			if(responseJson.data==1){
	  				
	  				alert("修改成功");
	  				document.getElementById('upDate').style.display='none';
	  			}else{
	  				alert("修改失败");
	  			}
	  			
	  		},function(e){
	  			alert("错误："+e.status);
	  		})
  		}
  		
  		
  		
  		
  		
  		//增加------------------------------------
  		$scope.add=function(){
  		
  			var pdata={empno:$scope.empno,ename:$scope.name,job:$scope.job,mgr:$scope.mgr,hiredate:$scope.hiredate,
  					   newsal:$scope.newsal,comm:$scope.comm,deptno:$scope.deptno,email:$scope.email,sex:$scope.sex
  			};
  			debugger
  			$http({
  			url:'${pageContext.request.contextPath}/add',
  			params:pdata
	  		}).then(function(responseJson){
	  			if(responseJson.data==1){
	  				
	  				alert("增加成功");
	  				document.getElementById('addDiv').style.display='none';
	  			}else{
	  				alert("增加失败");
	  			}
	  			
	  		},function(e){
	  			alert("错误："+e.status);
	  		})
  		}
  		
  		//删除
  		$scope.dele=function(){
  		var empno=event.srcElement.getAttribute("empno");
  			$http({
  			url:'${pageContext.request.contextPath}/delete?empno='+empno
	  		}).then(function(responseJson){
	  			if(responseJson.data==1){
	  				alert("删除成功");
	  				var emp=$scope.emp;
	  				for(var i=0;i<emp.length;i++){
	  					if(emp[i].empno==empno){//判断雇员id，找到了就删除
	  						$scope.emp.splice(i,1);
	  						break;
	  					}
	  				}
	  			}else{
	  				alert("删除失败");
	  			}
	  			
	  		},function(e){
	  			alert("错误："+e.status);
	  		})
  		}
  		
  		
  		//查询-------------------------
  		$scope.query=function(myCurpage){
	  		$http({
	  			url:'${pageContext.request.contextPath}/ajaxList?current='+myCurpage+'&ename='+$scope.ename
	  		}).then(function(responseJson){
	  				//这是传入参数访问地址的查询
  					//这里获取查询过来的分页用的值，赋给定义的分页全局变量值
	  				$scope.totalPage=responseJson.data.dateCount;
					//当前页
					$scope.myCurpage=responseJson.data.current;
					//上一页
					 $scope.prePage=responseJson.data.previousPage;
	                //总页数
	                $scope.totalCount=responseJson.data.totalCount;
	                //下一页
	                $scope.nextPage=responseJson.data.nextPage;
	  			$scope.emp=responseJson.data.date;
	  			
	  		},function(e){
	  			alert("错误："+e.status);
	  		})
  		};
  		//初始化查询--------------------------------------------------
  		$http({
  			url:'${pageContext.request.contextPath}/ajaxList?current=1&ename='+$scope.ename
  		}).then(function(responseJson){
  			
  			$scope.emp=responseJson.data.date;
  			$scope.totalPage=responseJson.data.dateCount;
  					//这是是第一次访问这个地址的时候查询
  					//这里获取查询过来的分页用的值，赋给定义的分页全局变量值
					//当前页
					$scope.myCurpage=responseJson.data.current;
					//上一页
					 $scope.prePage=responseJson.data.previousPage;
	                //总页数
	                $scope.totalCount=responseJson.data.totalCount;
	                //下一页
	                $scope.nextPage=responseJson.data.nextPage;
  			
  		},function(e){
  			alert("错误："+e.status);
  		})
  	})
  </script>
</html>

qq_39010381
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angularJs实现学生信息的增删改查以及翻页
01-23
angularJs实现学生信息的增删改查以及翻页，界面优美，
angularJS/路由实现增删改查
weikai_的博客
10-22 547
html> html> head> meta charset="UTF-8"> title>综合练习title> style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } style>
angularJS简易增删改查
梵韵
03-30 642
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, u
angular JS 实现增删改查
guojing5721的专栏
11-29 4599
#myDiv, #myDiv1 {             display: none;         }         table tr:first-of-type {             background: #808080;         }                                        
AngularJs实现增,删,改,查(全)
baipenggui_bo
12-18 3306
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> <...
angularjs 实现增删改查
01-28
在本文中，我们将深入探讨如何使用AngularJS实现MySQL数据库的增删改查功能，并结合后台的Java服务。AngularJS是一个强大的前端JavaScript框架，用于构建单页应用（SPA），而Java则常作为后端语言处理数据操作。让...
AngularJS模块化开发--增删改查
12-13
在这个"AngularJS模块化开发--增删改查"的项目中，我们将会深入探讨如何利用AngularJS进行高效且结构化的应用开发，同时结合RequireJS进行模块管理，以及使用Bootstrap进行UI设计和ngRoute实现页面间的路由跳转。...
AngularJS实现表格的增删改查（仅限前端）
10-19
主要介绍了AngularJS实现表格的增删改查，仅限前端，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angularjs增删 改查
08-06
这个框架的核心特性在于其数据绑定和依赖注入机制，极大地简化了前端开发，特别是对于实现列表的增删改查功能，AngularJS 提供了丰富的工具和API。 在AngularJS中，"增删改查"是数据管理的基本操作，通常涉及到以下...
angularjs的增删改查
changten的博客
11-19 326
angularjs自己定义一个数组 var app = angular.module("myApp", []);   app.controller("myCtrl", function($scope) {       $scope.user= [/*{               "id": 1,               "name": "张三1",              
Angularjs(增删改+分页+弹框+Sql数据库)
02-23
初学Angularjs,网上下载了一个demo，但是只有分页,本人进行了在上面增加删除,修改,编辑,功能.并且动态更新页号页码,比较简单易懂,采用最简单的Mvc框架，大神绕路
maven-springboot-bootstrap-angularjs学生数据库项目实践（初学者）
09-07
适合初学者的maven学生数据库小项目，后端springboot,前端bootstrap+angularjs,项目结构清晰，适合初学者借鉴学习。运行前需要修改application.properties中的数据源配置，有问题email:940457307@qq.com
sqlite数据库electron应用
05-04
nodejs框架electron应用 基于nodejs的框架,实现electron应用 数据库使用sqlite3 页面布局使用angularjs
angularJs 增删改查
chy521xin的博客
01-16 314
tbody tr:nth-child(even) { background-color: pink; } tbody tr:nth-child(odd) { background-color: yellow; } var app = angular.module("myApp", []); app.controller("myCtrl", function($scop
AngularJs增删改查
L59_1的博客
12-18 682
AngularJs的增删改查,排序,全选全不选,批量删除<script type="text/javascript" src="../js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("myApp",[]); app.
angualrJs对数据库数据处理的增删改查
xufang's blog
10-31 394
angualrJs对数据库数据处理的增删改查angularJs框架主要运用于管理系统，对数据的增删改查，下面就详细的写写angualrJs在这4个方面的运用一般情况下，我们得到如下的一个简单的已经转换为页面的设计图有4个按钮，它们的状态各不相同。其中添加和删除的初始状态是abled,修改和删除是disabledhtml代码1.按钮<div class="small-box"> <button
AngularJS用户列表的增删改查样式
hongfuqiang的博客
10-25 476
源代码如下:             练习             .even_cls {             background-color: #fff;         }         .odd_cls {             background-color: #4c8c99;         }         table {
2、angularJS的基本使用和应用，实现项目信息的增删改查
weixin_43421537的博客
03-01 328
使用angularJs需要在body标签中声明np-app 如果使用自定义的app，需要将app写在script标签中，如：ng-app=“pyg” 如果使用自定义的controller，需要将自定义的controller写在body标签中，如：ng-controller=“brandController” 指定某个属性的默认值，在body标签中使用init，如：ng-init=“属性名=‘默认属...
AngularJS页面的增删改查
qq_39714476的博客
10-22 383
var app = angular.module("myApp",['ngRoute']); //路由初始化配置 app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/addUser",{ controller:"addCtrl", templateUrl:"addUser.html"
AngularJS实现对用户信息的增删改查
duanzeshan的博客
09-21 720
html> head> meta charset="utf-8" /> script type="text/javascript" src="js/angular.js">script> script type="text/javascript" src="js/angular-route.js">script> script> var app=angular.module
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值