angularjs實現增刪改查
阿新 • • 發佈：2019-01-23
<%@ 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" onclick="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="×" onclick="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="×" onclick="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>