web/employeeList.html文件 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工管理</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/employeeList.css">
<script src="./js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="tabData">
<h2 class="title">员工信息列表</h2>
<div class="top">
<i>条<br>件<br>查<br>询</i>
<!-- 条件查询表单 -->
<form action="#" class="querySelect">
用户名：<input class="username" name="username" type="text">
姓名：<input class="name" name="name" type="text">
年龄：<input class="age" name="age" type="number">
籍贯：<input class="hometown" name="hometown" type="text">
工龄：<input class="workTime" name="workTime" type="number">
入职日期：<input class="createTime" name="createTime" type="date">
性别：<select name="sex" class="sex">
<option value="0" selected>选择性别</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
等级：<select name="level" class="level">
<option value="0" selected>选择等级</option>
<option value="1">特级</option>
<option value="2">高级</option>
<option value="3">中级</option>
<option value="4">初级</option>
</select>
</form>
<p class="other">
<span onclick="goSavePage(0)">添加员工</span>
<span onclick="delEmployeesByIds()">批量删除</span>
</p>
<p class="formBtn">
<span onclick="querySelect()">查询</span>
<span onclick="clearQuery()">清空</span>
</p>
</div> <!-- 数据表格 -->
<div class="myTable">
<table border="1" cellspacing="0">
<thead>
<tr class="thead">
<td><input type="checkbox"></td>
<td>序号</td>
<td>员工编号</td>
<td style="width: 110px;">用户名</td>
<td>角色</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>等级</td>
<td>简介</td>
<td style="width: 130px;">籍贯</td>
<td>工龄</td>
<td>联系方式</td>
<td>入职日期</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- 分页组件 -->
<div class="page">
<span class="total">共<span></span> 条</span>
<p>
<a href="#" class="firstPage" onclick="toFirstPage()">首页</a>
<a href="#" class="prePage" onclick="toPrePage()">上一页</a>
<a href="#" class="currentPage">
第<span class="current" style="color: #009688;"> </span> 页/ 共<span class="pages"></span> 页
</a>
<a href="#" class="nextPage" onclick="toNextPage()">下一页</a>
<a href="#" class="lastPage" onclick="toLastPage()">尾页</a>
<a href="#" class="limit">
<select name="limit" onchange="pageSizeChange()">
<option value="5" selected>5 条/页</option>
<option value="10">10 条/页</option>
<option value="15">15 条/页</option>
<option value="20">20 条/页</option>
<option value="30">30 条/页</option>
<option value="50">50 条/页</option>
<option value="100">100 条/页</option>
</select>
</a>
</p>
</div>
</div>
</body>
<script src="./js/data.js"></script>
</html> |
web/css/employeeList.css样式文件 .title {
text-align: center;
margin-top: 15px;
font-size: 22px;
}
.top {
width: 1330px;
height: 70px;
margin: 15px auto;
border: 1px solid #ddd;
border-radius: 6px;
padding: 15px 0 10px 20px;
}
.top i {
position: absolute;
font-size: 14px;
font-style: normal;
margin: -6px 0 0 -30px;
color: #009688;
font-weight: 700;
background-color: #FFF;
}
/* 条件查询表单 样式 */
.querySelect {
color: #333;
font-size: 12px;
}
.querySelect input {
width: 100px;
outline: none;
height: 22px;
line-height: 22px;
font-size: 12px;
color: #333;
padding-left: 10px;
margin-right: 15px;
border: 1px solid #aaa;
}
.querySelect select {
margin-right: 15px;
padding: 0 10px;
height: 28px;
line-height: 28px;
font-size: 12px;
color: #333;
outline: none;
text-align: center;
border: 1px solid #aaa;
}
.formBtn {
float: right;
height: 22px;
line-height: 22px;
margin: 15px 20px;
}
.formBtn span {
display: inline-block;
color: #fff;
font-size: 12px;
padding: 0 10px;
border-radius: 4px;
}
.formBtn span:hover {
cursor: pointer;
}
.formBtn span:first-child {
background-color: #009688;
margin-right: 10px;
}
.formBtn span:last-child {
background-color: #FF5722;
}
.other {
float: right;
height: 22px;
line-height: 22px;
margin: 15px 33px;
}
.other span {
display: inline-block;
color: #fff;
font-size: 12px;
padding: 0 10px;
border-radius: 4px;
}
.other span:hover {
cursor: pointer;
}
.other span:first-child {
background-color: #009688;
margin-right: 10px;
}
.other span:last-child {
background-color: #FF5722;
}
/* 数据表格样式 */
.myTable {
width: 1360px;
height: 500px;
overflow-y: auto;
margin: 20px auto;
}
thead tr {
background-color: rgba(0, 0, 255, 0.15);
}
thead td {
padding: 0 10px;
height: 24px;
line-height: 24px;
font-size: 14px;
text-align: center;
font-weight: 700;
}
tbody td {
padding: 5px 8px;
text-align: center;
font-size: 14px;
color: #666;
}
td.intr {
width: 290px;
text-align: left;
font-family: '楷体';
text-indent: 2em;
}
td span {
display: block;
color: #fff;
font-size: 12px;
padding: 5px;
border-radius: 4px;
margin-bottom: 5px;
}
td span:hover {
cursor: pointer;
font-weight: 700;
}
td .edit {
background-color: #009688;
}
td .del {
background-color: #FF5722;
}
/* 分页组件 */
.page {
width: 60%;
height: 30px;
line-height: 30px;
margin: 20px auto 10px;
text-align: center;
font-size: 0;
}
.page .total {
display: inline-block;
font-size: 14px;
color: #333;
}
.page p {
display: inline-block;
margin: 0 30px;
font-size: 0;
}
.page p a {
display: inline-block;
height: 28px;
line-height: 28px;
padding: 0 15px;
font-size: 14px;
border: 1px solid #eee;
color: #333;
}
.page p a {
border-left: 0;
}
.page p .firstPage {
border: 1px solid #eee;
}
.page p a:not(.limit):hover {
background-color: #16baaa;
color: #fff;
border-radius: 2px;
}
.page p .limit {
margin-left: 15px;
border: 1px solid #eee;
}
.page p .limit:hover {
border: 1px solid #16baaa;
}
.page p .limit select {
border: 0;
outline: none;
} |
web/js/data.js文件 let data = null;
/**
* 网页加载完成自动执行
*/
$(document).ready(function () {
pageSelect(); // 获取数据
showEmployees(); // 将数据显示到表格、分页组件中
selectTr(); // 表格数据行的 选中/取消选中
});
/*
功能：分页查询员工信息
参数：
current：当前页
limit：每页显示记录数
*/
function pageSelect(current = 1, limit = 5) {
// 通过ajax请求服务端数据
$.ajax({
async: false,
type: "post",
url: `http://localhost:8080/pageSelect?current=${current}&limit=${limit}`,
data: {
username: $('.querySelect .username').val(),
name: $('.querySelect .name').val(),
age: $('.querySelect .age').val(),
hometown: $('.querySelect .hometown').val(),
workTime: $('.querySelect .workTime').val(),
createTime: $('.querySelect .createTime').val(),
sex: $('.querySelect .sex').val(),
level: $('.querySelect .level').val()
},
success: function (res) {
let obj = JSON.parse(res);
data = obj;
}
});
}
/**
* 显示员工信息到数据表格中
*/
function showEmployees() {
$('.formData').hide(); // 隐藏 添加员工/修改员工 的 form 表单
$('#tabData').show();
$('#tabData table tbody').empty();
let str = "";
if (data.code == 200) {
let array = data.rows; // 获取表格中的显示数据
for (let i = 0; i < array.length; i++) {
str += `<tr>`
str += `<td><input type="checkbox" name="empID" value="${array[i].id}"></td>`
str += `<td>${i + 1}</td>
<td>${array[i].id}</td>
<td>${array[i].username}</td>`;
str += `<td>${array[i].role == 1 ? '管理员' : '普通员工'}</td>`;
str += `<td>${array[i].name}</td>`;
str += `<td>${array[i].sex == 1 ? '男' : '女'}</td>`;
str += `<td>${array[i].age}</td>`;
if (array[i].level == 1) {
str += `<td>特级</td>`;
} else if (array[i].level == 2) {
str += `<td>高级</td>`;
} else if (array[i].level == 3) {
str += `<td>中级</td>`;
} else {
str += `<td>初级</td>`;
}
str += `<td class="intr">${array[i].introduction}</td>
<td>${array[i].hometown}</td>
<td>${array[i].workTime}</td>
<td>${array[i].phone}</td>
<td>${array[i].createTime}</td>
<td>
<span class="edit" onclick="goSavePage(${array[i].id})">编辑</span>
<span class="del" onclick="deleteEmp(${array[i].id})">删除</span>
</td>`;
str += `</tr>`;
}
$('.page .total span').text(data.total);
$('.page .current').text(data.current);
$('.page .pages').text(data.pages);
$('.page').show();
} else {
str += `<tr><td align='center' colspan='15'>暂无数据</td></tr>`;
$('.page').hide();
}
$('#tabData table tbody').html(str);
}
/**
* 条件查询
*/
function querySelect() {
let limit = parseInt($('.page .limit select').val());
pageSelect(1, limit);
showEmployees();
}
/**
* 清空条件查询表单
*/
function clearQuery() {
let values = $('.querySelect input');
for (let i = 0; i < values.length; i++) {
$(values[i]).val("");
}
$('.querySelect .sex').find('option').eq(0).prop("selected", true);
$('.querySelect .level').find('option').eq(0).prop("selected", true);
let limit = parseInt($('.page .limit select').val());
pageSelect(1, limit);
showEmployees();
}
/**
* 跳转至首页
*/
function toFirstPage() {
let limit = parseInt($('.page .limit select').val());
pageSelect(1, limit);
showEmployees();
}
/**
* 跳转至尾页
*/
function toLastPage() {
let current = parseInt($('.page .pages').text());
let limit = parseInt($('.page .limit select').val());
pageSelect(current, limit);
showEmployees();
}
/**
* 跳转至上一页
*/
function toPrePage() {
let current = parseInt($('.page .current').text());
let limit = parseInt($('.page .limit select').val());
current = current <= 1 ? 1 : current - 1;
pageSelect(current, limit);
showEmployees();
}
/**
* 跳转至下一页
*/
function toNextPage() {
let current = parseInt($('.page .current').text());
let pages = parseInt($('.page .pages').text());
let limit = parseInt($('.page .limit select').val());
current = current >= pages ? pages : current + 1;
pageSelect(current, limit);
showEmployees();
}
/**
* 每页记录数发生变化
*/
function pageSizeChange() {
let limit = parseInt($('.page .limit select').val());
pageSelect(1, limit);
showEmployees();
}
/**
* 表格数据行的 全部选中/全部取消 效果
*/
function selectAll() {
$(".thead input").click(function () {
let items = $("input[name=empID]");
for (let i = 0; i < items.length; i++) {
items[i].checked = this.checked;
}
if (this.checked) {
$("tbody tr").css('background-color', 'rgba(0,0,0,0.15)');
} else {
$("tbody tr").css('background-color', '#fff');
}
});
}
/**
* 表格数据行的 选中/取消选中
*/
function selectTr() {
let array = $("tbody input");
for (let i = 0; i < array.length; i++) {
$(array[i]).click(function () {
let index = i;
if (this.checked) {
$("tbody tr").eq(index).css('background', 'rgba(0,0,0,0.15)');
} else {
$("tbody tr").eq(index).css('background', '#fff');
}
})
}
} |
