顏色標記部分爲不同的地方
pagelist.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
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>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 引入jquery -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-1.10.1.js"></script>
<!-- 引入bootstrap的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
//全選
//主框被選中,其他框同樣被選中
$("#checkedAll").click(function() {
var s=this.checked;
$(":checkbox[name='items']").prop("checked",s);
});
//副框被點擊，觸動主框的改變
//$(":checkbox[name='items']")選擇器
$(":checkbox[name='items']").click(function() {
$("#checkedAll").prop("checked",$(":checkbox[name='items']").length == $(":checkbox[name='items']:checked").length);
});
//添加
$("#addEmpBtn").click(function(){
//通過ajax請求獲取部門信息
$.ajax({
url:"${pageContext.request.contextPath }/department/selectDepartments.do",
type:"POST",
success:function(data){
//清空下拉框中數據
$("#addModal select").empty();
//data表示要遍歷的集合或數組
//index表示下標
//obj表示各個元素
$.each(data,function(index,obj){
//創建option標籤
var option = $("<option value='"+obj.id+"'>"+obj.dname+"</option>");
//添加到部門的下拉框中
$("#addModal select").append(option);
});
},
datatype:"text",
});
//打開新增用的模態框
$("#addModal").modal("show");
});
$("#save").click(function(){
var a=true;
var b=true;
var c=true;
var addname=$("#addName").val();
$("#addName").next("span").empty();
if(addname=="" || addname==null){
$("#addName").parent().parent().addClass("has-error");
$("#addName").next("span").append("用戶名不能爲空！");
a= false;
}
var addpwd=$("#addPwd").val();
$("#addPwd").next("span").empty();
if(addpwd.length<3 || addpwd.length>6){
$("#addPwd").parent().parent().addClass("has-error");
$("#addPwd").next("span").append("密碼必須是3--6位！");
b=false;
}
var addSalary=$("#addSalary").val();
if(addSalary=="" || addSalary==null){
$("#addSalary").next("span").empty();
$("#addSalary").parent().parent().addClass("has-error");
$("#addSalary").next("span").append("工資不能爲空！");
c=false;
}
if(a && b && c){
$("#addModal form").submit();
}else{
}
/* var data = $("#addModal form").serialize();
$.post("${pageContext.request.contextPath }/employee/insertEmployee.do",data,
function(){
//關閉模態框
$("#addModal").modal("hide");
//重新加載當前頁面
window.location.reload();
} ); */
});
//批量刪除
$(".deleteUsersBtn").click(function(){
$("#delModals").modal("show");
});
$(".deleteUsers").click(function(){
var arr=new Array();
$("input[name='items']:checked").each(function(){
arr.push($(this).parent().next().text());
});
//alert(arr);
location.href="${pageContext.request.contextPath }/employee/deleteEmployees.do?eids="+arr;
});
//刪除
$(".deleteUserBtn").click(function(){
var user=$(this).parent().parent();
var id=$(user).find("td:eq(1)").text().trim();
$("#delModal input[name=eid]").val(id);
//alert(id);
$("#delModal").modal("show");
});
$(".deleteUser").click(function(){
var id=$("#eid").val();
// alert(id);
location.href="${pageContext.request.contextPath }/employee/deleteEmployee.do?eid="+id;
});
//修改
$(".updateUserBtn").click(function(){
$.ajax({
async:false,//同步請求
url:"${pageContext.request.contextPath }/department/selectDepartments.do",
type:"POST",
success:function(data){
//清空下拉框中數據
$("#updateModal select").empty();
//data表示要遍歷的集合或數組
//index表示下標
//obj表示各個元素
$.each(data,function(index,obj){
//創建option標籤
var option = $("<option value='"+obj.id+"'>"+obj.dname+"</option>");
//添加到部門的下拉框中
$("#updateModal select").append(option);
});
},
datatype:"text",
});
$("#updateModal select option").attr("selected",false);
var user=$(this).parent().parent();
var id=$(user).find("td:eq(1)").text().trim();
var name=$(user).find("td:eq(2)").text().trim();
var pwd=$(user).find("td:eq(3)").text().trim();
var gender=$(user).find("td:eq(4)").text().trim();
var birthday=$(user).find("td:eq(5)").text().trim();
var salary=$(user).find("td:eq(6)").text().trim();
var depid=$(user).find("td:eq(7)").text().trim();
//alert(depid);
$("#updateModal input[name=eid]").val(id);
$("#updateModal input[name=username]").val(name);
$("#updateModal input[type=password]").val(pwd);
$("#updateModal input[name=birthday]").val(birthday);
$("#updateModal input[name=salary]").val(salary);
//方法一：單選按鈕選中
$("#updateModal :radio[value="+gender+"]").prop("checked", true);
$("#updateModal select ").val(depid);
$("#updateModal").modal("show");
});
$("#update").click(function(){
var a=true;
var b=true;
var c=true;
var addname=$("#updateName").val();
$("#updateName").next("span").empty();
if(addname=="" || addname==null){
$("#updateName").parent().parent().addClass("has-error");
$("#updateName").next("span").append("用戶名不能爲空！");
a= false;
}
var addpwd=$("#updatePwd").val();
$("#updatePwd").next("span").empty();
if(addpwd.length<3 || addpwd.length>6){
$("#updatePwd").parent().parent().addClass("has-error");
$("#updatePwd").next("span").append("密碼必須是3--6位！");
b=false;
}
var updateSalary=$("#updateSalary").val();
if(updateSalary=="" || updateSalary==null){
$("#updateSalary").next("span").empty();
$("#updateSalary").parent().parent().addClass("has-error");
$("#updateSalary").next("span").append("工資不能爲空！");
c=false;
}
if(a && b && c){
$("form[name=update]").submit();
}else{
}
});
});
</script>
</head>
<body>
<div class="container">
<center> <h2 style=" color: brown;font-weight: bold;font-style:italic;font-family:'微軟雅體'; ">管理用戶系統</h2> </center>
<div class="row">
<div class="col-md-2 col-md-offset-1">
<button class="btn btn-danger btn-lg deleteUsersBtn">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>批量刪除</button>
</div>
<div class="col-md-2 col-md-offset-6">
<button id="addEmpBtn" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加</button>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table class="table table-hover table-bordered">
<thead>
<tr class='success' >
<th><input type="checkbox" id="checkedAll" /></th>
<th>eid</th>
<th>username</th>
<th>password</th>
<th>gender</th>
<th>birthday</th>
<th>salary</th>
<th style='display:none' >id</th>
<th>dname</th>
<th>location</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${pageInfo.list }" var="one">
<!-- class="warning"> class="active" class=""> -->
<tr class="danger">
<td><input type="checkbox" name="items" /></td>
<td >${one.eid }</td>
<td>${one.username}</td>
<td>${one.password }</td>
<td>${one.gender}</td>
<td><f:formatDate value="${one.birthday}" pattern="yyyy-MM-dd" /></td>
<td>${one.salary}</td>
<td style='display:none' >${ one.dd.id}</td>
<td>${ one.dd.dname}</td>
<td>${one.dd.location}</td>
<td>
<button eid="${one.eid }" class="btn btn-danger deleteUserBtn">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>delete</button>
|
<button class="btn btn-primary updateUserBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>update</button></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<!-- 分頁條 -->
<div class="row">
<div style="font-weight: bold;font-size: 16px;font-family:'微軟雅體';" class="col-md-7">
共<i class="blue">${pageInfo.total}</i>條記錄,
當前顯示第 <i class="blue">${pageInfo.pageNum}/${pageInfo.pages}</i> 頁
</div>
<nav aria-label="Page navigation">
<ul class="pagination">
<c:if test="${!pageInfo.isFirstPage}">
<li><a href="${pageContext.request.contextPath }/employee/selectEmployees.do?pageno=1">首頁</a></li>
<li> <a href="${pageContext.request.contextPath }/employee/selectEmployees.do?pageno=${pageInfo.pageNum-1 }" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:forEach items="${pageInfo.navigatepageNums }" var="num">
<c:if test="${num == pageInfo.pageNum }">
<li class="active"><a href="${pageContext.request.contextPath }/employee/selectEmployees.do?pageno=${num }">${num }</a></li>
</c:if>
<c:if test="${num != pageInfo.pageNum }">
<li><a href="${pageContext.request.contextPath }/employee/selectEmployees.do?pageno=${num }">${num }</a></li>
</c:if>
</c:forEach>
<c:if test="${!pageInfo.isLastPage}">
<li>
<a href="${pageContext.request.contextPath }/employee/selectEmployees.do?pageno=${pageInfo.pageNum+1 }" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li><a href="${pageContext.request.contextPath }/employee/selectEmployees.do?pageno=${pageInfo.lastPage}">尾頁</a></li>
</c:if>
</ul>
</nav>
</div>
</div>
<!-- 修改模態框（Modal） -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">修改User
<span class="glyphicon glyphicon-user"></span>
</h4>
</div>
<div class="modal-body" >
<form class="form-horizontal" name='update' action="${pageContext.request.contextPath }/employee/updateEmployee.do">
<div class="form-group">
<label for="inputEid" class="col-sm-2 control-label"></label>
<div class="col-sm-6">
<input type="hidden" class="form-control" id="inputEid"
name="eid" >
</div>
</div>
<div class="form-group">
<label for="updateName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="updateName"
name="username" placeholder="請輸入員工姓名">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="updatePwd" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="updatePwd"
name="password" placeholder="請輸入員工密碼">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputBir" class="col-sm-2 control-label">生日</label>
<div class="col-sm-6">
<input type="date" class="form-control" id="inputBir"
name="birthday" placeholder="請選擇員工生日">
</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="男" > 男 </label>
<label class="radio-inline">
<input type="radio" name="gender" value="女"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="updateSalary" class="col-sm-2 control-label">薪水</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="updateSalary"
name="salary" placeholder="請輸入員薪水">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputDep" class="col-sm-2 control-label">所屬部門</label>
<div class="col-sm-3">
<select id="updateselect" class="form-control" name="dd.id">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" id="update" name='update' class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span>修改</button>
</div>
</div>
</div>
</div>
<!-- 批量刪除模態框（Modal） -->
<div class="modal fade" id="delModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">是否刪除選中的用戶？
<span class="glyphicon glyphicon-user"></span>
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger deleteUsers"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>刪除</button>
</div>
</div>
</div>
</div>
<!-- 刪除模態框（Modal） -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">是否刪除該用戶？
<span class="glyphicon glyphicon-user"></span>
<input type="hidden" name="eid" id="eid"/>
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger deleteUser"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>刪除</button>
</div>
</div>
</div>
</div>
</div>
<!-- 添加模態框（Modal） -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">添加User
<span class="glyphicon glyphicon-user"></span>
</h4>
</div>
<div class="modal-body" >
<!-- -->
<form class="form-horizontal" action="${pageContext.request.contextPath }/employee/insertEmployee.do">
<div class="form-group">
<label for="addName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="addName"
name="username" placeholder="請輸入員工姓名" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="addPwd" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="addPwd"
name="password" placeholder="請輸入員工密碼" aria-describedby="helpBlock2">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="addBir" class="col-sm-2 control-label">生日</label>
<div class="col-sm-6">
<input type="date" class="form-control" id="addBir"
name="birthday" placeholder="請選擇員工生日">
</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="addSalary" class="col-sm-2 control-label">薪水</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="addSalary"
name="salary" placeholder="請輸入員薪水" aria-describedby="helpBlock2">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputDep" class="col-sm-2 control-label">所屬部門</label>
<div class="col-sm-3">
<select class="form-control" name="dd.id">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" id="save" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>保存</button>
</div>
</div>
</div>
</div>
</body>
</html>