list.xml
<%@ 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:"json",
});
//打开新增用的模态框
$("#addModal").modal("show");
});
$("#save").click(function(){
/* var data = $("#addModal form").serialize();
$.post("${pageContext.request.contextPath }/employee/insertEmployee.do",data,
function(){
alert("aaa");
//关闭模态框
$("#addModal").modal("hide");
//重新加载当前页面
window.location.reload();
} ); */
$("#addModal form").submit();
});
//修改
$(".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:"json",
});
$("#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 department=$(user).find("td:eq(7)").text().trim();
$("#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 select").val(department);
//方法一:单选按钮选中
$("#updateModal :radio[value="+gender+"]").prop("checked", true);
/* 方法二: if( gender=="男"){
$('#updateModal input:radio:first').attr('checked', true);
}else{
$('#updateModal input:radio:last').attr('checked', true);
} */
$("#updateModal").modal("show");
});
$("#update").click(function(){
$("form[name=update]").submit();
});
//删除
$(".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();
location.href="${pageContext.request.contextPath }/employee/deleteEmployee.do?eid="+id;
});
//批量删除
$(".deleteUsersBtn").click(function(){
$("#delModals").modal("show");
});
$(".deleteUsers").click(function(){
var arr=new Array();
$(":checkbox[name='items']:checked").each(function(){
arr.push($(this).parent().next().text());
});
location.href="${pageContext.request.contextPath }/employee/deleteEmployees.do?eids="+arr;
});
});
</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" value="${one.eid }" /></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 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.pageNum+1}" >
尾页
</a>
</li>
</c:if>
</ul>
</nav>
</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>
<!-- 修改模态框(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="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputName"
name="username" placeholder="请输入员工姓名">
</div>
</div>
<div class="form-group">
<label for="inputPwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPwd"
name="password" placeholder="请输入员工密码">
</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="inputSalary" class="col-sm-2 control-label">薪水</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="inputSalary"
name="salary" placeholder="请输入员薪水">
</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="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="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputName"
name="username" placeholder="请输入员工姓名">
</div>
</div>
<div class="form-group">
<label for="inputPwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPwd"
name="password" placeholder="请输入员工密码">
</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="男" checked> 男 </label>
<label class="radio-inline"> <input type="radio" name="gender"
value="女"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="inputSalary" class="col-sm-2 control-label">薪水</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="inputSalary"
name="salary" placeholder="请输入员薪水">
</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>