<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="itheima" uri="http://itcast.cn/common/"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>User Information Management Menu</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/vendors/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/vendors/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/admin.css">
<script src="${pageContext.request.contextPath}/static/assets/vendors/nprogress/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/static/assets/vendors/jquery/jquery.js"></script>
<script src="${pageContext.request.contextPath}/static/assets/vendors/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootbox.all.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/md5.js"></script>
<style type="text/css">
#title_info {
color: #0496A4;
text-align: center;
font-size: 29px;
}
.main {
background-image: url(${pageContext.request.contextPath}/img/BG1.jpg);
}
</style>
<script>
$(function(){
var totalRecord;
var currentPagem;
//页面加载完成后，发送ajax请求，获取分页数据
$(function() {
to_page(1);
});
function to_page(pn) {
var jsonParams = {"pn":pn};
// console.log(jsonParams);
$.ajax({
url : "${pageContext.request.contextPath}/admin/users.action",
type : "POST",
dataType : "json",
contentType : "application/json",
data : JSON.stringify(jsonParams),
success : function(result) {
//console.log(result);
// 1. 解析JSON 显示用户数据
build_users_table(result);
// 2.1 显示分页信息
build_page_info(result);
// 2.2 显示分页条
build_page_nav(result);
}
});
}
function build_users_table(result) {
var users = result.extend.pageInfo.list;
//清空table表格
$("#users_table tbody").empty();
$.each(users, function(index, item) {
//alert(item.empName);
var checkBoxTd = $("<td><input type='checkbox' class='check_item'></input></td>").addClass("text-center");
var userIdTd = $("<td></td>").append(item.userId).addClass("text-center");
var userNameTd = $("<td></td>").append(item.userName).addClass("text-center");
var emailTd = $("<td></td>").append(item.userMailAddress).addClass("text-center");
var phoneNumberTd = $("<td></td>").append(item.userPhoneNumber).addClass("text-center");
var userType = item.userType;
if(userType==0){
userType = 'Administrator';
}else if(userType==1){
userType = 'Normal Manager';
}else if(userType==2){
userType = 'Normal User';
}
var userTypeTd = $("<td></td>").append(userType).addClass("text-center");
var editbtn = $("<button></button>").addClass("btn btn-info btn-xs edit_btn").append("Edit");
// console.log("item.userId",item.userId);
editbtn.attr("edit-id", item.userId);
// console.log("editbtn",editbtn.attr("edit-id"));
var delbtn = $("<button></button>").addClass("btn btn-danger btn-xs delete_btn").append("Delete");
// console.log("item.userId",item.userId);
delbtn.attr("delete-id", item.userId);
// console.log("delbtn",delbtn.attr("delete-id"));
var btntd = $("<td></td>").append(editbtn).append(" ").append(delbtn).addClass("text-center");
$("<tr></tr>").append(checkBoxTd)
.append(userIdTd)
.append(userNameTd)
.append(emailTd)
.append(phoneNumberTd)
.append(userTypeTd)
.append(btntd)
.appendTo("#users_table tbody");
});
}
//分页信息
function build_page_info(result) {
totalRecord = result.extend.pageInfo.total;
currentPage = result.extend.pageInfo.pageNum;
}
//分页条
function build_page_nav(result) {
//page_nav_area
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination pagination-sm pull-right");
var firstPageLi = $("<li></li>").append($("<a></a>").append("First").attr("href", "#"));
var prePageLi = $("<li></li>").append($("<a></a>").append("Previous").attr("href", "#"));
if (result.extend.pageInfo.hasPreviousPage == false) {
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
} else {
//添加翻页事件
firstPageLi.click(function() {
to_page(1);
});
prePageLi.click(function() {
// console.log("result.extend.pageInfo.pageNum - 1",result.extend.pageInfo.pageNum - 1);
to_page(result.extend.pageInfo.pageNum - 1);
});
}
var nextPageLi = $("<li></li>").append($("<a></a>").append("Next").attr("href", "#"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("Last").attr("href", "#"));
if (result.extend.pageInfo.hasNextPage == false) {
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
} else {
//添加翻页事件
lastPageLi.click(function() {
// console.log("result.extend.pageInfo.pages",result.extend.pageInfo.pages);
to_page(result.extend.pageInfo.pages);
});
nextPageLi.click(function() {
// console.log("result.extend.pageInfo.pageNum + 1",result.extend.pageInfo.pageNum + 1);
to_page(result.extend.pageInfo.pageNum + 1);
});
}
ul.append(firstPageLi).append(prePageLi);
var navNum = result.extend.pageInfo.navigatepageNums;
$.each(navNum, function(index, item) {
var pageLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "#"));
if (result.extend.pageInfo.pageNum == item) {
pageLi.addClass("active");
}
//绑定单击事件
pageLi.click(function() {
// console.log("item",item);
to_page(item);
})
ul.append(pageLi);
});
ul.append(nextPageLi).append(lastPageLi);
$("#page_nav_area").append(ul);
}
// 新增用户按钮
$("#user_add_modal_btn").click(function() {
//清除表单数据和样式
reset_form("#userAddModal form")
//发送ajax请求，查出部门信息，显示在下拉列表中
//getDepts("#dept_add_area");
//弹出新增模态框
$("#userAddModal").modal({
backdrop : "static"
});
});
function reset_form(ele) {
$(ele)[0].reset();
$(ele).find("*").removeClass("has-error has-success");
$(ele).find(".help-block").text("");
}
// 用户姓名输入框的校验
$("#userName_add_input").mouseleave(function() {
//发送ajax校验用户名是否可用
var userName = $("#userName_add_input").val();
var jsonParams = {"userName":userName};
// console.log(jsonParams);
//alert(empName);
$.ajax({
url : "${pageContext.request.contextPath}/admin/checkuser.action",
type : "POST",
dataType : "json",
contentType : "application/json",
data : JSON.stringify(jsonParams),
success : function(result) {
if (result.code == 100) {
show_validate_msg("#userName_add_input",
"success", "This username is available");
$("#user_save_btn").attr("ajax-va", "success");
} else {
show_validate_msg("#userName_add_input",
"error", result.extend.va_msg);
$("#user_save_btn").attr("ajax-va", "error");
}
}
});
});
//正则校验，代码抽取
function show_validate_msg(ele, status, msg) {
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if ("success" == status) {
$(ele).parent().addClass("has-success");
$(ele).next("span").text("");
} else if ("error" == status) {
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
//保存新增员工信息
$("#user_save_btn").click(function() {
if ($("#user_save_btn").attr("ajax-va") == "error") {
// console.log(11);
return false;
} else if (!validate_add_form()) {
// console.log(22);
return false;
} else {
// console.log(55);
var userName = $("#userName_add_input").val();
var password = $("#password_add_input").val();
var email = $("#email_add_input").val();
var phoneNumber = $("#phoneNumber_add_input").val();
var jsonParams = {
"userName":userName,
"userPassword":hex_md5(password),
"userMailAddress":email,
"userPhoneNumber":phoneNumber
};
//模态框中填写的表单数据提交给服务器进行保存
$.ajax({
url : "${pageContext.request.contextPath}/admin/saveUser.action",
type : "POST",
dataType : "json",
contentType : "application/json",
data : JSON.stringify(jsonParams),
success : function(result) {
if (result.code == 100) {
//保存成功
console.log("result.code",result.code);
//关闭模态框
$("#userAddModal").modal("hide");
//到最后一页，发送ajax请求即可
to_page(totalRecord);
} else {
if (result.extend.saveUser_msg != undefined) {
//显示邮箱错误信息
show_validate_msg("#phoneNumber_add_input","error",result.extend.saveUser_msg);
}
}
}
});
}
});
//校验表单数据
//名字
//邮箱
function validate_add_form() {
//验证用户名
var userName = $("#userName_add_input").val();
// console.log("userName",userName);
var regName = /(^[A-Za-z0-9]{4,15}$)/;
// console.log("regName.test(userName)",regName.test(userName));
if (!regName.test(userName)) {
//alert("名字必须是6-16位英文数字组合");
show_validate_msg("#userName_add_input", "error",
"username need contain 4-15 letter or number");
return false;
} else {
show_validate_msg("#userName_add_input", "success", "");
}
// 验证密码
var password = $("#password_add_input").val();
// console.log("password",password);
var regPassword = /(^[A-Za-z0-9]{4,15}$)/;
// console.log("!regPassword.test(password)",!regPassword.test(password));
if (!regPassword.test(password)) {
//alert("名字必须是4-15位英文数字组合");
show_validate_msg("#password_add_input", "error",
"password need contain 4-15 letter or number");
return false;
} else {
show_validate_msg("#password_add_input", "success", "");
}
// 验证确认密码
var confirmPassword = $("#confirmPassword_add_input").val();
// console.log("confirmPassword",confirmPassword);
// console.log("password!=confirmPassword",password!=confirmPassword);
if (password!=confirmPassword) {
show_validate_msg("#confirmPassword_add_input", "error",
"The two passwords you typed do not match");
return false;
} else {
show_validate_msg("#confirmPassword_add_input", "success", "");
}
//校验邮箱
var email = $("#email_add_input").val();
// console.log(email);
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
// console.log(regEmail.test(email));
if (!regEmail.test(email)) {
show_validate_msg("#email_add_input", "error", "The email format is invalid");
return false;
} else {
show_validate_msg("#email_add_input", "success", "");
}
// 验证手机号
var phoneNumber = $("#phoneNumber_add_input").val();
// console.log("phoneNumber",phoneNumber);
var regPhoneNumber = /(^[0-9]{5,15}$)/;
// console.log("regPhoneNumber.test(phoneNumber)",regPhoneNumber.test(phoneNumber));
if (!regPhoneNumber.test(phoneNumber)) {
show_validate_msg("#phoneNumber_add_input", "error",
"Phone number must be have 5-15 numbers");
return false;
} else {
show_validate_msg("#phoneNumber_add_input", "success", "");
}
return true;
}
//新版本jquery使用
$(document).on("click", ".edit_btn", function() {
// 根据userId查出当前用户信息
getUser($(this).attr("edit-id"));
//弹出框,把员工ID传递给更新按钮
// console.log(11,$(this).attr("edit-id"));
$("#user_update_btn").attr("edit-id", $(this).attr("edit-id"));
// console.log(22,$("#user_update_btn").attr("edit-id"));
$("#userUpdateModal").modal({
backdrop : "static"
});
});
function getUser(userId) {
var jsonParams = {"userId":userId};
$.ajax({
url : "${pageContext.request.contextPath}/admin/getUser.action",
type : "POST",
dataType : "json",
contentType : "application/json",
data : JSON.stringify(jsonParams),
success : function(result) {
var user = result.extend.user;
$("#userName_update_static").text(user.userName);
$("#email_update_input").val(user.userMailAddress);
$("#phoneNumber_update_input").val(user.userPhoneNumber);
}
})
}
// 点击更新用户信息
$("#user_update_btn").click(function() {
// 验证密码
var password = $("#password_update_input").val();
// console.log("password",password);
var regPassword = /(^[A-Za-z0-9]{4,15}$)/;
// console.log("!regPassword.test(password)",!regPassword.test(password));
if (!regPassword.test(password)) {
//alert("名字必须是4-15位英文数字组合");
show_validate_msg("#password_update_input", "error",
"password need contain 4-15 letter or number");
return false;
} else {
show_validate_msg("#password_update_input", "success", "");
}
// 验证确认密码
var confirmPassword = $("#confirmPassword_update_input").val();
// console.log("confirmPassword",confirmPassword);
// console.log("password!=confirmPassword",password!=confirmPassword);
if (password!=confirmPassword) {
show_validate_msg("#confirmPassword_update_input", "error",
"The two passwords you typed do not match");
return false;
} else {
show_validate_msg("#confirmPassword_update_input", "success", "");
}
//校验邮箱
var email = $("#email_update_input").val();
// console.log("email",email);
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
// console.log("regEmail.test(email)",regEmail.test(email));
if (!regEmail.test(email)) {
show_validate_msg("#email_update_input", "error", "The email format is invalid");
return false;
} else {
show_validate_msg("#email_update_input", "success", "");
}
// 验证手机号
var phoneNumber = $("#phoneNumber_update_input").val();
// console.log("phoneNumber",phoneNumber);
var regPhoneNumber = /(^[0-9]{5,15}$)/;
// console.log("regPhoneNumber.test(phoneNumber)",regPhoneNumber.test(phoneNumber));
if (!regPhoneNumber.test(phoneNumber)) {
show_validate_msg("#phoneNumber_update_input", "error",
"Phone number must be have 5-15 numbers");
return false;
} else {
show_validate_msg("#phoneNumber_update_input", "success", "");
}
var userId = $("#user_update_btn").attr("edit-id");
console.log("userId",userId);
var jsonParams = {
"userId":userId,
"userPassword":hex_md5(password),
"userMailAddress":email,
"userPhoneNumber":phoneNumber
};
$.ajax({
url : "${pageContext.request.contextPath}/admin/updateUser.action",
type : "PUT",
dataType : "json",
contentType : "application/json",
data : JSON.stringify(jsonParams),
success : function(result) {
if (result.code == 100) {
//保存成功
//alert(result.msg);
//关闭模态框
$("#userUpdateModal").modal("hide");
//alert(result.msg);
//回到本页面
to_page(currentPage);
} else {
var message = result.extend.updateUser_msg;
show_validate_msg("#phoneNumber_update_input", "error",message);
}
}
});
});
//单个删除
$(document).on("click", ".delete_btn", function() {
var currentDeleteBtn = $(this);
//弹出是否删除对话框
var delName = $(this).parents("tr").find("td:eq(2)").text();
//alert(delName);
bootbox.confirm({
size: "small",
message: "<b>Are you sure to</b> <b style='color:d9534f'>delete</b> <b>"+delName+"?</b>",
callback: function(result){
if(result){
var userId = currentDeleteBtn.attr("delete-id");
console.log("userId",userId);
var jsonParams = {"ids":userId};
// console.log(jsonParams);
//确定，发送删除请求
$.ajax({
url:"${pageContext.request.contextPath}/admin/deleteUserById.action",
type:"DELETE",
dataType:"json",
contentType:"application/json",
data : JSON.stringify(jsonParams),
success:function(result){
var message = result.extend.deleteUser_msg;
if (result.code == 100) {
// alert(result.msg);
bootbox.alert({
size: "small",
title: "Message",
message: "<b style='color:#0496A4'>"+message+"</b>"
});
to_page(currentPage);
}else{
bootbox.alert({
size: "small",
title: "Message",
message: "<b style='color:#d9534f'>"+message+"</b>"
});
}
}
});
}
}
});
});
//批量删除
//全选功能
$("#check-all").click(function(){
//使用prop修改和读取dom原生属性，不使用attr
//alert($(this).prop("checked"));
$(".check_item").prop("checked",$(this).prop("checked"));
});
//单选点满，全选按钮也要勾上
$(document).on("click",".check_item",function(){
//判断是否全部勾选
var flag = $(".check_item:checked").length==$(".check_item").length;
$("#check-all").prop("checked",flag);
});
//点击删除选中的用户
$("#user_delete_selected_btn").click(function(){
var userNames = "";
var del_idstr = "";
$.each($(".check_item:checked"),function(index,item){
userNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "-";
});
userNames = userNames.substring(0,userNames.length-1);
// console.log("userNames",userNames);
del_idstr = del_idstr.substring(0,del_idstr.length-1);
// console.log("del_idstr",del_idstr);
bootbox.confirm({
size: "small",
message: "<b>Are you sure to</b> <b style='color:#d9534f'>delete "+userNames+"?</b>",
callback: function(result){
if(result){
var jsonParams = {"ids":del_idstr};
// console.log(jsonParams);
//确定，发送删除请求
$.ajax({
url:"${pageContext.request.contextPath}/admin/deleteUserById.action",
type:"DELETE",
dataType:"json",
contentType:"application/json",
data : JSON.stringify(jsonParams),
success:function(result){
var message = result.extend.deleteUser_msg;
if (result.code == 100) {
bootbox.alert({
size: "small",
title: "Message",
message: "<b style='color:#0496A4'>"+message+"</b>"
});
to_page(currentPage);
}else{
bootbox.alert({
size: "small",
title: "Message",
message: "<b style='color:#d9534f'>"+message+"</b>"
});
}
}
});
}
}
});
});
});
</script>
</head>
<body>
<!-- <script>NProgress.start()</script> -->
<div class="main">
<c:import url="navbar.jsp"></c:import>
<!-- 新增用户的模态框 -->
<!-- Modal -->
<div class="modal fade" id="userAddModal" 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">Add User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputUserName" class="col-sm-4 control-label">UserName</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="userName_add_input"
name="userName" placeholder="please input username"> <span
class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-4 control-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password_add_input"
name="password" placeholder="please input password"> <span
class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputconfirmPassword" class="col-sm-4 control-label">Confirm Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="confirmPassword_add_input"
name="confirmPassword" placeholder="please input confirm password"> <span
class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputEmailName" class="col-sm-4 control-label">Email</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="email_add_input"
name="email" placeholder="please input email"> <span
class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPhoneNumber" class="col-sm-4 control-label">Phone Number</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="phoneNumber_add_input"
name="phomeNumber" placeholder="please input phone number"> <span
class="help-block"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="user_save_btn">Save</button>
</div>
</div>
</div>
</div>
<!-- 员工修改的模态框 -->
<!-- Modal -->
<div class="modal fade" id="userUpdateModal" tabindex="-1" role="dialog">
<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" >Modify User Information</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="userName_update_static" class="col-sm-4 control-label">UserName</label>
<div class="col-sm-6">
<p class="form-control-static" id="userName_update_static"></p>
</div>
</div>
<div class="form-group">
<label for="password_update_input" class="col-sm-4 control-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password_update_input"
name="password" placeholder="please input password"> <span
class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="confirmPassword_update_input" class="col-sm-4 control-label">Confirm Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="confirmPassword_update_input"
name="confirmPassword" placeholder="please input confirm password"> <span
class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="email_update_input" class="col-sm-4 control-label">Email</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="email_update_input"
name="email" placeholder="please input email"> <span
class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="phoneNumber_update_input" class="col-sm-4 control-label">Phone Number</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="phoneNumber_update_input"
name="phomeNumber" placeholder="please input phone number"> <span
class="help-block"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="user_update_btn">Save</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<!-- 标题 -->
<div class="row">
<div id="title_info">
User Information Management Page
</div>
</div>
<!-- 新增 删除 按钮 -->
<div class="row">
<div class="col-md-2 col-md-offset-10">
<button type="button" class="btn btn-success btn-sm" id="user_add_modal_btn">Add User</button>
<button type="button" class="btn btn-danger btn-sm" id="user_delete_selected_btn">Delete Selected Users</button>
</div>
</div>
<div class="page-title">
</div>
<!-- 显示表格数据 -->
<div class="row">
<table class="table table-striped table-bordered table-hover" id="users_table">
<thead>
<tr>
<th class="text-center" width="40"><input type="checkbox" id="check-all"></th>
<th class="text-center">User Id</th>
<th class="text-center">Username</th>
<th class="text-center">Email</th>
<th class="text-center">Phone Number</th>
<th class="text-center">User Type</th>
<th class="text-center" width="150">Operation</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="page-action" id="page_nav_area">
</div>
</div>
</div>
<c:set var="current_page" scope="session" value="manage_user"/>
<c:import url="sidebar.jsp"></c:import>
<!-- <script>NProgress.done()</script> -->
</body>
</html>manage_user
猜你喜欢
转载自blog.csdn.net/Leon_Jinhai_Sun/article/details/89001589
今日推荐
周排行