Ajax-Servlet第四课 员工管理系统-多选删除员工信息
Posted 笔触狂放
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax-Servlet第四课 员工管理系统-多选删除员工信息相关的知识，希望对你有一定的参考价值。
概念
本文完成多选删除，全选删除，反选删除等功能
功能实现
在员工信息列表页面增加多选功能，以及将删除按钮调整:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工管理系统-信息列表</title>
<style>
#sea,.update,.delete
color: white;
font-weight: bold;
padding: 5px 10px;
border-width: 0px;
border-radius: 6px;
#sea
width: 100px;
background-color: cornflowerblue;
.update
width: 100px;
background-color: green;
.delete
width: 100px;
background-color: brown;
#sea:hover,.update:hover,.delete:hover
background-color: red;
table
width: 800px;
background-color: darkcyan;
border-width: 0px;
border-radius: 6px;
text-align: center;
color: white;
font-weight: bold;
padding: 10px;
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
//定义全局变量，用于保存还未显示任何数据的table表格的代码状态
var html="";
//当该页面完全显示在浏览器上后，触发ajax事件
$(function ()
$.ajax(
url:"home",
type:"GET",
data:"",
success:function (json)
html=$("#tab").html();
//将原本的数据清除
$("#d2").html("");
$("#d3").html("");
$("#tab").html("");
$("#tab").html(html);
//
// "works":["","",""],
// "dates":["","",""] ,
//"lists":["id":1,"name":"张三","sex":,"age":,"opendate":,workClass:,,,]
//
//将works这个参数对应的数组的数据显示在部门名称的列表上
for (var i = 0; i <json.works.length ; i++)
$("#d2").append("<option>"+json.works[i]+"</option>");
//将dates这个参数对应的数组的数据显示在入职时间的列表上
for (var i = 0; i <json.dates.length ; i++)
$("#d3").append("<option>"+json.dates[i]+"</option>");
//将lists这个参数对应的数组的数据显示在表格中
parse(json.lists);
,
error:function ()
alert("连接服务器失败");
,
dataType:"json"
);
);
function ch1(obj)
var info=obj.value;
//将用户选择的部门作为条件，查询当前部门所有员工的入职时间
//使用ajax给服务器发送请求
$.ajax(
url:"home",
type:"POST",
data:$("p input:first").attr("name")+"="+info,
success:function (json)
// ["","",""]
$("#d3").html("");
for (var i = 0; i <json.length ; i++)
$("#d3").append("<option>"+json[i]+"</option>");
,
error:function ()
alert("连接失败");
,
dataType:"json"
);
function f()
//用户选择的部门名称以及入职时间
var w=$("#i1").val();
var d=$("#i2").val();
$.ajax(
url:"ListServlet",
type:"POST",
data:"workClass="+w+"&openDate="+d,
success:function (json)
//[,,]
//根据服务器发回的数据，更新表格上的内容
$("#tab").html("");
$("#tab").html(html);
parse(json);
,
error:function ()
alert("连接失败");
,
dataType:"json"
);
//点击修改按钮，获得当前员工的编号，发送给服务器
function btn_update(id)
location.href="ListServlet?id="+id+"&bool=1";
function parse(json)
for (var i = 0; i <json.length ; i++)
$("#tab").append("<tr>\\n" +
" <td><input type='checkbox' class='box'></td>\\n" +
" <td class='td'>"+json[i].id+"</td>\\n" +
" <td>"+json[i].name+"</td>\\n" +
" <td>"+json[i].sex+"</td>\\n" +
" <td>"+json[i].age+"</td>\\n" +
" <td>"+json[i].openDate+"</td>\\n" +
" <td>"+json[i].workClass+"</td>\\n" +
" <td><input class=\\"update\\" type=\\"button\\" onclick='btn_update("+json[i].id+")' value=\\"修改\\"> \\n" +
" </td>\\n" +
" </tr>")
</script>
</head>
<body>
<div align="center">
<h1>员工信息列表</h1>
<p><input id="i1" type="search" list="d2" onchange="ch1(this)" name="workClass" placeholder="请选择部门">
<datalist id="d2"></datalist>
<input id="i2" type="search" list="d3" name="openDate" placeholder="请选择入职时间">
<datalist id="d3"></datalist>
<input id="sea" type="button" onclick="f()" value="搜索">
<input class="delete" type="button" onclick="del()" value="删除">
</p>
<table id="tab">
<tr>
<th><input type="checkbox" onclick="check(this)" id="allCheck">全选
<input type="checkbox" onclick="nCheck()" id="notCheck">反选</th>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工性别</th>
<th>员工年龄</th>
<th>入职时间</th>
<th>部门名称</th>
<th>功能操作</th>
</tr>
</table>
</div>
</body>
</html>其页面效果如下:
给全选按钮添加点击事件，当全选按钮被选中后，所有员工信息都被选中,全选按钮被取消，全部取消
//给全选按钮添加点击事件
function check(obj)
//当全选被选中，所有多选按钮都要被选中
//判断该多选按钮原本的状态是选中还是未选中
//如果原本的状态是选中的，那么就需要取消选中
//当全选按钮被取消，所有多选按钮都要被取消
//如果原本的状态是未选中的，那么就需要选中
//当全选被选中，所有多选按钮都要被选中
var boxs=document.getElementsByClassName("box");
for (var i = 0; i <boxs.length ; i++)
boxs.item(i).checked=obj.checked;
其页面效果如下:
给反选按钮添加点击事件，当反选按钮被选中后，根据多选按钮的选中状态，取反。
//给反选按钮添加点击事件
function nCheck()
var boxs=document.getElementsByClassName("box");
//判断反选按钮是否被勾上，如果被钩上
//所有多选按钮，被勾上的变为取消，未钩上的变为选中
//如果反选按钮被取消，所有多选按钮就要恢复
// if (obj.checked)
//如果被钩上,所有多选按钮，被勾上的变为取消，未钩上的变为选中
for (var i = 0; i <boxs.length ; i++)
boxs.item(i).checked=!boxs.item(i).checked;
//
其页面效果如下:
给删除按钮添加点击事件，当删除按钮被点击的时候，获得所有被选中的多选按钮对应的员工编号:
function del()
//遍历所有数据上的多选按钮，把被选中的多选按钮的员工编号获得出来
var str="";
var boxs=document.getElementsByClassName("box");
var tds=document.getElementsByClassName("td");
for (var i = 0; i <boxs.length ; i++)
if (boxs.item(i).checked)
var id=tds.item(i).innerHTML;
str+=id+",";
//通过请求发送给服务器，要求服务器将这个被选中的员工信息根据员工编号进行删除
location.href="UpdateServlet?ids="+str;
并提交给服务器:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
//接收页面通过点击删除按钮发送过来的大量的员工编号
String ids = request.getParameter("ids");
int delete = service.delete(ids);
if (delete>0)
//刷新列表页面
response.sendRedirect("workerList.html");
服务器将接收的所有需要删除的员工编号进行递交给业务逻辑层:
//根据员工编号进行批量删除员工信息
int delete(String ids); @Override
public int delete(String ids)
//1,2,3,4,5,6,
//将接收到批量的员工编号组成的字符串进行按“,”分割
//从字符串中去除末尾最后一个逗号
String substring = ids.substring(0, ids.length() - 1);
//1 2 3 4 5 6
//按,号分割
String[] split = substring.split(",");
boolean is=false;
for (String s:split)
int del = dao.del(Integer.parseInt(s));
if (del>0)
is=true;
else
is=false;
//判断所有员工编号对应的数据是否都删除成功了，如果全部删除成功，返回值为1，否则返回值为0
return is?1:0;
业务逻辑层将所有员工编号进行按逗号分割，并通过循环遍历递交给数据访问层dao进行删除的sql语句操作,通过判断数据库的返回值进行综合判断，如果全部执行成功则返回1，如果有一条删除失败则返回0
//根据员工编号进行删除员工信息
int del(int id);
@Override
public int del(int id)
return DBUtil.jt.update("delete from emp where id=?",new Object[]id);
当所有操作都执行后，业务逻辑层将最后的结果返回给控制器，控制器根据结果进行判断，如果删除成功，则刷新员工信息列表页面。
总结
本次对于员工管理系统的简单操作的小项目，到这里就结束了，读者可自行在本项目的基础上扩充功能和改善界面，以及改善代码性能等等。。。
以上是关于Ajax-Servlet第四课 员工管理系统-多选删除员工信息的主要内容，如果未能解决你的问题，请参考以下文章