bootstrap+angular+ssm整合(下)

最新推荐文章于 2022-12-07 23:48:34 发布

Frank_cxx

最新推荐文章于 2022-12-07 23:48:34 发布

阅读量3.1k

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/Frank_cxx/article/details/75622381

版权

AngularJS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里最好将js的内容提取出来如index.js

list.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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>综合案例--员工信息管理</title>


<link rel="stylesheet" type="text/css" href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css">


<script type="text/javascript" src="static/js/jquery-3.2.1.js"></script>

<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>


<script type="text/javascript" src="static/angular/angular.min.js"></script>
<script type="text/javascript">
//创建模块
var empApp = angular.module("empApp",[]);
var total = 0;//总条数
var curPageNum = 1;//当前页
//创建控制器
empApp.controller("EmpAppController",["$scope","$http",function($scope,$http){
//跳转到指定页码
$scope.toPage = function(num){
//发送http请求
$http({
url:"emp/selectPage?pageno="+num,
method:"GET"
}).then(function successCallback(response) {

// console.log(response.data);
$scope.pageInfo = response.data.data.pageInfo;
//定义员工数据列表模型
$scope.empList = $scope.pageInfo.list;
//总条数
total = response.data.data.pageInfo.total;
//当前页
curPageNum = response.data.data.pageInfo.pageNum;

}, function errorCallback(response) {
// 请求失败执行代码
});
};

//默认跳转到第1页
$scope.toPage(1);

$scope.loadDepts=function(deptId){
$http({
method:"post",
url:"${pageContext.request.contextPath}/emp/selectDepts",
}).success(function(data,header,config,status){
//响应成功
//console.log(data);
//下拉框对应的模型
$scope.deptList = data.data.deptList;
//设置当前部门id
$scope.currentDeptId = deptId;
});
};

//定义显示新增模态框的函数
$scope.showAddModal = function(){
//加载部门列表
$scope.loadDepts();
//打开模态框
angular.element("#addEmpModal").modal("show");
};

$scope.saveEmp=function(){
var data=angular.element("#addEmpModal form").serialize();
$http({
url:"${pageContext.request.contextPath}/emp/save",
method:"post",
data:data,
headers:{"Content-Type":"application/x-www-form-urlencoded"}
}).then(function successCallback(response) {
//alert("处理成功！");
angular.element("#addEmpModal").modal("hide");
$scope.toPage(999);
/*
使用这种格式不会跳转到尾页
$scope.toPage(pages+1);
使用这种格式会跳转到尾页
$scope.toPage(999);
*/
});
};

//加载员工
$scope.loadEmp = function(empId){
$http({
url:"emp/selectEmp?emp_id="+empId,
method:'GET'
}).success(function(data,header,config,status){
//响应成功
$scope.currentEmp = data.data.emp;
});
};

//显示修改模态框
$scope.showUpdateModal = function(empId,deptId){
//表单重置
//$scope.reset("update");
//加载部门列表
$scope.loadDepts(deptId);
//查询修改当前要修改的员工
$scope.loadEmp(empId);
angular.element("#updateEmpModal").modal("show");
};

///修改员工
$scope.updateEmp = function(){
//console.log($scope.newEmpModel);
var data = angular.element("#updateEmpModal form").serialize();
$http({
url:"emp/update",
method:"POST",
data:data,
headers : {"Content-Type":"application/x-www-form-urlencoded"} // set the headers so angular passing info as form data (not request payload)
}).success(function(data,header,config,status){
//响应成功
angular.element("#updateEmpModal").modal("hide");
//跳转到最后一页
$scope.toPage(curPageNum);
});
};

//全选或全不选
$scope.itemCheckedFlag =false;
$scope.checkAll = function(){
$scope.itemCheckedFlag = !$scope.itemCheckedFlag;
angular.element(".common").prop("checked",$scope.itemCheckedFlag);
};

$scope.validate=function(){
//普通复选框的个数
var num=angular.element(".common").length;
//普通复选框被选中的个数
var checkNum=angular.element(".common:checked").length;
//通过判断复选框的个数是否与被选中的个数一致来决定全选框的状态
$scope.itemCheckedFlag=(num==checkNum);
};

//展示模态框
$scope.showDeleteModal = function(){
angular.element("#deleteEmpModal").modal("show");
};
//执行批量删除
$scope.doBatchDel = function(){
var eids = "";
//准备数据eids
var checkArr = angular.element(".common:checked");
for(var i=0; i<checkArr.length;i++){
var eid =checkArr[i].value;
if(i ==0){
eids += eid;
}else{
eids += ","+eid;
}
}

//alert(eids);
//发送http请求
$http({
url:"${pageContext.request.contextPath}/emp/delEmp?eids="+eids,
type:"POST",
headers : {"Content-Type":"application/x-www-form-urlencoded"}
}).then(function successCallback(response) {
//删除完成，关闭模态框
angular.element("#deleteEmpModal").modal("hide");
//跳转到当前页
$scope.toPage(curPageNum);
});
};

//单个删除
$scope.showDelModal = function(){
var eids = $(".del").attr("code");
$("#btn").val(eids);
angular.element("#alertModal").modal("show");
};
$scope.delet = function(){
$http({
url:"${pageContext.request.contextPath}/emp/delEmp?eids="+$("#btn").val(),
type:"POST",
headers : {"Content-Type":"application/x-www-form-urlencoded"}
}).then(function successCallback(response) {
//删除完成，关闭模态框
angular.element("#alertModal").modal("hide");
//跳转到当前页
$scope.toPage(curPageNum);
});
};

}]);
</script>
</head>

<body ng-app="empApp" ng-controller="EmpAppController">


<div id="alertModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">是否删除的数据?</h4>
</div>
<div class="modal-footer">
<button type="button" ng-click="delet()" class="btn btn-danger" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>

<div id="deleteEmpModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="deleteModelLabel">是否确认要删除该数据?</h4>
<input type="hidden" id="btn" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

<button ng-click="doBatchDel()" type="button" class="btn btn-danger">确定</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">添加员工</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmpName" class="col-sm-2 control-label">员工姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmpName"
name="emp_name" placeholder="请输入员工姓名">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputGender" class="col-sm-2 control-label">性别</label>
<div class="col-sm-6">
<label class="radio-inline"> <input type="radio"
name="gender" value="男" checked> 男 </label> <label
class="radio-inline"> <input type="radio" name="gender"
value="女"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail"
name="email" placeholder="请输入员工邮箱">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">所属部门</label>
<div class="col-sm-3">
<select class="form-control" name="dept.dept_id">
<option ng-repeat="d in deptList" value="{{d.dept_id}}">{{d.dept_name}}</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="saveEmpBtn" ng-click="saveEmp()" type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>


<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">修改员工</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmpName" class="col-sm-2 control-label">员工姓名</label>
<div class="col-sm-6">
<input type="hidden" name="emp_id" value="{{currentEmp.emp_id}}">
<input type="text" class="form-control" id="updateEmpName"
name="emp_name" placeholder="请输入员工姓名" ng-model="currentEmp.emp_name">
</div>
</div>
<div class="form-group">
<label for="inputGender" class="col-sm-2 control-label">性别</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="gender" value="男" ng-model="currentEmp.gender"> 男 </label>
<label class="radio-inline">
<input type="radio" name="gender" value="女" ng-model="currentEmp.gender"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="updateInputEmail"
name="email" placeholder="请输入员工邮箱" ng-model="currentEmp.email">
<span class="help-block"></span>
</div>
</div>

<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">所属部门</label>
<div class="col-sm-3">
<select class="form-control" name="dept.dept_id" ng-model="currentEmp.dept.dept_id">
<option ng-repeat="d in deptList" value="{{d.dept_id}}"
ng-selected="d.dept_id == currentEmp.dept.dept_id">
{{d.dept_name}}
</option>
</select>
</div>
</div>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="updateEmpBtn" type="button" class="btn btn-primary" ng-click="updateEmp()">保存</button>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>员工信息管理</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-8">

<button id="addEmpBtn" ng-click="showAddModal()" class="btn btn-success btn-lg" >
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
新增
</button>

<button id="toBatchDelEmpBtn" ng-click="showDeleteModal()" class="btn btn-danger btn-lg" >
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
批量删除
</button>
</div></div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table id="empTable" class="table table-hover">
<tr>
<td><input type="checkbox" ng-checked="itemCheckedFlag" ng-click="checkAll()" /></td>
<td>id</td>
<td>员工姓名</td>
<td>性别</td>
<td>邮箱</td>
<td>所属部门</td>
<td>操作</td>
</tr>
<tr ng-repeat="emp in empList">
<td><input type="checkbox" ng-click="validate()" class="common" value="{{ emp.emp_id }}" /></td>
<td>{{emp.emp_id }}</td>
<td>{{emp.emp_name}}</td>
<td>{{emp.gender}}</td>
<td>{{emp.email}}</td>
<td>{{emp.dept.dept_name}}</td>
<td>
<button ng-click="showUpdateModal(emp.emp_id,emp.dept.dept_id)" class="btn btn-primary editEmpBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
修改
</button>

<button ng-click="showDelModal()" code="{{emp.emp_id }}" class="btn btn-danger del" >
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</td>
</tr>

</table>
</div>
</div>


<div class="row">
<div class="col-md-6">共有{{pageInfo.total}}条数据,共有{{pageInfo.pages}}页</div>

<nav aria-label="Page navigation">
<ul class="pagination">
<li ng-show="pageInfo.hasPreviousPage"><a href="javascript:void(0)" ng-click="toPage(1)">首页</a></li>
<li ng-hide="pageInfo.hasPreviousPage" class="disabled"><a href="javascript:void(0)" >首页</a></li>
<li ng-show="pageInfo.hasPreviousPage">
<a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum-1)" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li ng-hide="pageInfo.hasPreviousPage" class="disabled">
<a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum-1)" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li ng-repeat="num in pageInfo.navigatepageNums" ng-class="num==pageInfo.pageNum?'active':''"><a href="#" ng-click="toPage(num)">{{num}}</a></li>
<li ng-hide="pageInfo.hasNextPage" class="disabled">
<a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum+1)" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li ng-show="pageInfo.hasNextPage" >
<a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum+1)" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li ng-show="pageInfo.hasNextPage" ><a href="javascript:void(0)" ng-click="toPage(pageInfo.pages)">尾页</a></li>
<li ng-hide="pageInfo.hasNextPage" class="disabled"><a href="javascript:void(0)" ng-click="toPage(pageInfo.pages)">尾页</a></li>
</ul>
</nav>
</div>
</div>

</body>
</html>