<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:display="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>SSH CRUD 操作 </title>
<!--
如下包引用的是在线jar包
-->
<!--引入jquery包-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!-- 点击新增EMP按钮触发的模态框-->
<div id="myModal" class="modal fade" 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">
<!--empName-->
<div class="form-group">
<label for="empName" class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input type="text" id="empName" name="empName" class="form-control" placeholder="empName">
</div>
</div>
<!--email-->
<div class="form-group">
<label for="email" class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="email" placeholder="email">
</div>
</div>
<!--gender-->
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">gender</label>
<div class="col-sm-offset-2 col-sm-10" id="gender">
<label class="radio-inline">
<input id="boy" type="radio" name="gender" value="男" checked> 男
</label>
<label class="radio-inline">
<input id="girl" type="radio" name="gender" value="女"> 女
</label>
</div>
</div>
<!--depList-->
<div id="depNameList" class="form-group">
<label for="depName" class="col-sm-2 control-label">depName</label>
<div class="col-sm-6">
<select name="depId" class="form-control" id="depName" class="depName">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button id="commitEmp" type="button" class="btn btn-primary">确认添加</button>
</div>
</div>
</div>
</div>
<!--点击修改员工表的按钮触发的模态框-->
<div id="myModalEdit" class="modal fade" 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">修改员工的信息</h4>
</div>
<div class="modal-body">
<!--修改员工的信息-->
<form class="form-horizontal">
<!--empId
style="display: none"
-->
<input type="text" style="display: none" id="empId" name="empId" >
<!--empName-->
<div class="form-group">
<label for="empName" class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input readonly="readonly" id="empName_update" type="text" name="empName" class="form-control" placeholder="empName">
</div>
</div>
<!--email-->
<div class="form-group">
<label for="email" class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input id="email_update" type="email" name="email" class="form-control" placeholder="email">
</div>
</div>
<!--gender-->
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">gender</label>
<div class="col-sm-offset-2 col-sm-10" >
<label class="radio-inline">
<input id="boy-update" type="radio" name="gender" value="男" checked> 男
</label>
<label class="radio-inline">
<input id="girl-update" type="radio" name="gender" value="女"> 女
</label>
</div>
</div>
<!--depId-->
<div class="form-group">
<label for="depName" class="col-sm-2 control-label">depName</label>
<div class="col-sm-6">
<select id="depId" class="form-control" >
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button id="confirmEditEmp" type="button" class="btn btn-primary">确认修改</button>
</div>
</div>
</div>
</div>
<!--头部-->
<div class="row">
<!--标题-->
<div class="col-md-6"><h1>SSH CRUD 操作</h1></div>
</div>
<div class="col-md-8 col-md-offset-8">
<!--按钮data-target="#myModal"-->
<button id="addEmp" data-toggle="modal" type="button" class="btn btn-success">添加</button>
<button id="delEmpList" type="button" class="btn btn-danger">批量删除</button>
</div>
<!--table主体-->
<div >
<!--主体-->
<table class="table table-striped">
<thead>
<tr>
<th><input id="btnHead" type="checkbox"></th>
<th>empId</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>createTime</th>
<th>depName</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<!--分页条-->
<div>
<nav aria-label="Page navigation">
<ul id="pageItems" class="pagination">
</ul>
</nav>
</div>
</body>
<script type="text/javascript">
var baseUrl="http://localhost:8001/"
var empName="";
var empIds="";
//批量删除员工的按钮
$("#delEmpList").click(function(){
var empIdList = [];
for(var i =0;i<$(".btnItem:checked").parents("tr").find("td:eq(1)").length;i++){
//console.log($(".btnItem:checked").parents("tr").find("td:eq(1)")[i].textContent)
empIdList.push($(".btnItem:checked").parents("tr").find("td:eq(1)")[i].textContent);
}
//console.log(empIdList);
if(confirm("确认删除吗？")){
var req={
"ids":empIdList
};
//发送ajax请求删除
$.ajax({
dataType: 'json',
contentType: "application/json",
type: 'Post',
url:baseUrl+"test/deleteEmpByIds" ,
data: JSON.stringify(req),
success: function (data){
//先打印返回的值 进行判断是否添加成功
console.log(data);
if(data.status == '200'){
alert("删除成功！");
location.reload();
}else{
alert(data.data);
}
}
});
}
})
//往后台新增员工
$("#commitEmp").click(function(){
var emp = {};
emp.empName = $("#empName").val();
emp.email = $("#email").val();
emp.depId = $("#depName").val();
var flag = $("#boy")[0].checked;
if(flag){
emp.gender = $("#boy")[0].value ;
}else{
emp.gender = $("#girl")[0].value ;
}
//console.log("确认添加用户的信息为：");
//往后台发送数据
$.ajax({
dataType: 'json',
contentType: "application/json",
type: 'post',
url:baseUrl+"test/addEmp" ,
data: JSON.stringify(emp),
success: function (data){
console.log("往后台发送数据等待返回值data");
//先打印返回的值 进行判断是否添加成功
console.log(data);
if(data.status == '200'){
alert("添加成功");
location.reload();
}else {
alert(data.data);
}
}
});
});
// <!-- 页面一加载即从后台获取数据-->
$.ajax({
dataType: 'json',
type: 'get',
url:baseUrl+"test/selectEmpsWithDep" ,
data:{
pages: 1,
rows: 5
},
success: function (data){
//console.log(data.data);
//第一步 动态的往表单主中添加数据
var cont = data.data.list;
initTable(cont);
//第二步 填充分页明细
initItems(data.data);
}
});
/**
* init table data动态的往表单主中添加数据
* @param cont
*///表单的主体
function initTable(cont){
var html = '';
$.each(cont, function (k, v) { // 这里的函数参数是键值对的形式，k代表键名，v代表值
html += "<tr>\n" +
" <td><input class='btnItem' type=\"checkbox\"></td>\n" +
" <td>"+cont[k].empId+"</td>\n" +
" <td>"+cont[k].empName+"</td>\n" +
" <td>"+ cont[k].gender+"</td>\n" +
" <td>"+ cont[k].email +"</td>\n" +
" <td>"+ cont[k].createTime +"</td>" +
" <td>"+ cont[k].depName+"</td>\n" +
" <td>\n" +
" <button onclick=editEmpF('"+cont[k].empId+"') type=\"button\" class=\"btn btn-primary btn-sm \" >修改</button>\n" +
" <button onclick=delEmpF('"+cont[k].empId+"') type=\"button\" class=\"btn btn-warning btn-sm \" >删除</button>\n" +
" </td>\n" +
" </tr>"
});
$("#tbody").append(html);
}
//设置全选择功能
$("#btnHead").click(function () {
console.log(this.checked);
if(this.checked){
//如果头部按钮全选，则按钮全选
$("#tbody input").prop("checked",this.checked);
}else{
//如果头部按钮不选，则子按钮全不选
$("#tbody input").prop("checked",false);
}
})
//点击单个删除按钮
function delEmpF(empId) {
//alert(empId);
//向后台发送请求
$.ajax({
dataType: 'json',
type: 'delete',
url:baseUrl+"test/deleteEmpById/"+empId,
success: function (data) {
console.log(data);
if(data.status == '200'){
alert("删除成功！");
location.reload();
}else{
alert(data.data);
}
}
})
}
//点击员工修改按钮， 向后台获取数据，并且弹出模态框
function editEmpF(empId) {
//console.log(empId);
//向后台请求参数
$.ajax({
dataType: 'json',
type: 'get',
url:baseUrl+"test/selectEmpById/"+empId,
success: function (data){
var emp =data.data;
var depId = emp.depId;
console.log("后台传来的depId值"+":"+depId);
//往模态框里添加数据
$("#empId").val(emp.empId);
$("#empName_update").val(emp.empName);
$("#email_update").val(emp.email);
$("#myModalEdit input[name=gender]").val([emp.gender]);
//往模态框里添加数据
//第一步先清空
$("#depId").html("");
//第二步 往里面添加数据
var html = '';
for(var i=0;i<emp.departList.length;i++){
if(emp.depName == emp.departList[i].depName){
html += "<option selected='selected' value= '"+emp.departList[i].depId+"' >"+emp.departList[i].depName+"</option>";
}else{
html += "<option value= '"+emp.departList[i].depId+"' >"+emp.departList[i].depName+"</option>";
}
}
$("#depId").append(html);
}
});
//弹出添加的页面
$("#myModalEdit").modal({
backdrop : "static",
})
}
//保存修改员工信息的请求 发送给后台
$("#confirmEditEmp").click(function () {
var emp={};
emp.empId=$("#empId").val();
emp.email = $("#email_update").val();
if($("#boy-update")[0].checked){
emp.gender =$("#boy-update")[0].value;
} else{
emp.gender = $("#girl-update")[0].value;
}
emp.depId=$("#depId")[0].value;
console.log(emp);
//往后台发送数据
$.ajax({
dataType: 'json',
contentType: "application/json",
type: 'PUT',
url:baseUrl+"test/updateEmp" ,
data: JSON.stringify(emp),
success: function (data){
//先打印返回的值 进行判断是否添加成功
//console.log(data);
var status = data.status;
var data = data.data ;
if(status == '200'){
alert("添加成功");
location.reload();
}else{
alert(data);
location.reload();
}
}
});
})
//第二步 填充分页明细
function initItems(result){
var arr=new Array();
arr = result.navigatepageNums;
var firstPage=result.firstPage;
var hasPreviousPage= result.hasPreviousPage;
var hasNextPage= result.hasNextPage;
var lastPage = result.lastPage;
//前一页
var prePageLi= "<li>\n" +
" <button id='pre' onclick='preTarge("+firstPage+","+hasPreviousPage+") ' class='btn btn-default' aria-label=\"Previous\">\n" +
" <span aria-hidden=\"true\">«</span>\n" +
" </button>\n" +
" </li>";
//后一页
var lastPageLi= " <li>\n" +
" <button id='last' onclick='lastTarge("+lastPage+","+hasNextPage+") ' class='btn btn-default' aria-label=\"Next\">\n" +
" <span aria-hidden=\"true\">»</span>\n" +
" </button>\n" +
" </li>";
//页码
var html = '';
$.each(arr,function(index,value){
html +="<li ><button onclick='goTarget("+arr[index]+")' class='btn btn-default'>"+arr[index]+"</button></li>"
});
$("#pageItems").append(prePageLi).append(html).append(lastPageLi);
};
//点击分页条按钮 往后台发送参数获取数据
function goTarget(index) {
console.log("后一页传来的index的值："+""+index);
//请求后台 获取对应数据
$.ajax({
dataType: 'json',
type: 'get',
url:baseUrl+"test/selectEmpsWithDep" ,
data:{
pages: index,
rows: 5
},
success: function (data){
//第一步 动态的往表单主中添加数据
//a)先清除数据
$("#tbody").html("");
//b)再调用方法往里面添加数据
var cont = data.data.list;
initTable(cont);
//第二步 填充分页明细
//a)先清除数据
$("#pageItems").html("");
//b)再调用方法往里面添加数据
initItems(data.data);
}
});
}
//点击前一页按钮
function preTarge(firstPage,hasPreviousPage){
if(hasPreviousPage){
//说明还有上一页则往后台发送数据获取参数
var index = firstPage-1;
goTarget(index);
}
}
//点击后一页按钮
function lastTarge(lastPage,hasNextPage) {
console.log("点击后一页按钮");
console.log(lastPage,hasNextPage);
if(hasNextPage){
//说明后一页还有数据
console.log("点击后一页按钮true");
var index = lastPage+1;
goTarget(index);
}
console.log("点击后一页按钮false");
}
//点击新增按钮---> 弹出添加的页面
$("#addEmp").click(function(){
//从后台获取部门表中的所有部门的明细
getDepNameList()
//弹出添加的页面
$("#myModal").modal({
backdrop : "static",
})
});
//从后台获取部门表中的所有部门的明细
function getDepNameList() {
$.ajax({
dataType: 'json',
type: 'get',
url:baseUrl+"selectDepName",
data:{},
success: function (data){
var depList = data.data
//往模态框里添加部门的数据
insertDepName(depList);
}
});
};
//往模态框里添加数据
function insertDepName(depList) {
//第一步先清空
$("#depName").html("");
//第二步 往里面添加数据
var html = '';
//console.log(depList)
for(var i=0;i<depList.length;i++){
html += "<option value= '"+depList[i].depId+"' >"+depList[i].depName+"</option>";
}
$("#depName").append(html);
}
</script>
</html>
网友评论