打开原教程视频
注:本人是渣渣,有错请谅解。
增加用户
流程:点击新增按钮->跳转至用户信息填写页面->点击添加将数据保存到后台服务器并转到用户列表。
1、在userList.jsp的新增按钮添加跳转链接
2、在userController中添加方法返回指定的jsp页面
/**
* 返回新增用户页面
* @return
*/
@RequestMapping(value = "/toAddUser")
public String toAddUser(){
return "user/addUser";
}
3、在webapp/jsp/user中创建addUser.jsp,下面的代码复制进去。
addUser.jsp内容
<%--
Created by IntelliJ IDEA.
User: 黄彬
Date: 2020/6/4
Time: 20:45
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
<base href="<%=basePath%>"/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/doc.min.css">
<style>
.tree li {
list-style-type: none;
cursor:pointer;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div><a class="navbar-brand" style="font-size:32px;" href="user.html">众筹平台 - 用户维护</a></div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li style="padding-top:8px;">
<div class="btn-group">
<button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i> ${sessionScope.user.username} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
<li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
<li class="divider"></li>
<li><a href="login.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
</ul>
</div>
</li>
<li style="margin-left:10px;padding-top:8px;">
<button type="button" class="btn btn-default btn-danger">
<span class="glyphicon glyphicon-question-sign"></span> 帮助
</button>
</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tree">
<ul style="padding-left:0px;" class="list-group">
<li class="list-group-item tree-closed" >
<a href="main.html"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
</li>
<li class="list-group-item">
<span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge" style="float:right">3</span></span>
<ul style="margin-top:10px;">
<li style="height:30px;">
<a href="userController/toUserList.htm" style="color:#e6d6ff;"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
</li>
<li style="height:30px;">
<a href="role.html"><i class="glyphicon glyphicon-certificate"></i> 角色维护</a>
</li>
<li style="height:30px;">
<a href="permission.html"><i class="glyphicon glyphicon-lock"></i> 许可维护</a>
</li>
</ul>
</li>
<li class="list-group-item tree-closed">
<span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge" style="float:right">3</span></span>
<ul style="margin-top:10px;display:none;">
<li style="height:30px;">
<a href="auth_cert.html"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a>
</li>
<li style="height:30px;">
<a href="auth_adv.html"><i class="glyphicon glyphicon-check"></i> 广告审核</a>
</li>
<li style="height:30px;">
<a href="auth_project.html"><i class="glyphicon glyphicon-check"></i> 项目审核</a>
</li>
</ul>
</li>
<li class="list-group-item tree-closed">
<span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span>
<ul style="margin-top:10px;display:none;">
<li style="height:30px;">
<a href="cert.html"><i class="glyphicon glyphicon-picture"></i> 资质维护</a>
</li>
<li style="height:30px;">
<a href="type.html"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a>
</li>
<li style="height:30px;">
<a href="process.html"><i class="glyphicon glyphicon-random"></i> 流程管理</a>
</li>
<li style="height:30px;">
<a href="advertisement.html"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a>
</li>
<li style="height:30px;">
<a href="message.html"><i class="glyphicon glyphicon-comment"></i> 消息模板</a>
</li>
<li style="height:30px;">
<a href="project_type.html"><i class="glyphicon glyphicon-list"></i> 项目分类</a>
</li>
<li style="height:30px;">
<a href="tag.html"><i class="glyphicon glyphicon-tags"></i> 项目标签</a>
</li>
</ul>
</li>
<li class="list-group-item tree-closed" >
<a href="param.html"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">数据列表</a></li>
<li class="active">新增</li>
</ol>
<div class="panel panel-default">
<div class="panel-heading">表单数据<div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-question-sign"></i></div></div>
<div class="panel-body">
<form id="addForm">
<div class="form-group">
<label for="floginacct">登陆账号</label>
<input type="text" class="form-control" id="floginacct" placeholder="请输入登陆账号">
</div>
<div class="form-group">
<label for="fusername">用户名称</label>
<input type="text" class="form-control" id="fusername" placeholder="请输入用户名称">
</div>
<div class="form-group">
<label for="femail">邮箱地址</label>
<input type="email" class="form-control" id="femail" placeholder="请输入邮箱地址">
<p class="help-block label label-warning">请输入合法的邮箱地址, 格式为: xxxx@xxxx.com</p>
</div>
<button id="addButton" type="Button" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i> 新增</button>
<button id="resetButton" type="Button" class="btn btn-danger"><i class="glyphicon glyphicon-refresh"></i> 重置</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">帮助</h4>
</div>
<div class="modal-body">
<div class="bs-callout bs-callout-info">
<h4>测试标题1</h4>
<p>测试内容1,测试内容1,测试内容1,测试内容1,测试内容1,测试内容1</p>
</div>
<div class="bs-callout bs-callout-info">
<h4>测试标题2</h4>
<p>测试内容2,测试内容2,测试内容2,测试内容2,测试内容2,测试内容2</p>
</div>
</div>
<!--
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
-->
</div>
</div>
</div>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script type="text/javascript" src="jquery/layer/layer.js"></script>
<script type="text/javascript">
$(function () {
$(".list-group-item").click(function(){
if ( $(this).find("ul") ) {
$(this).toggleClass("tree-closed");
if ( $(this).hasClass("tree-closed") ) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
});
});
var adding = -1;
$("#addButton").click(function () {
var floginacct =$("#floginacct");
var fusername =$("#fusername");
var femail =$("#femail");
if ($.trim(floginacct.val())==""){
layer.msg("账号不能为空!", {time:1000, icon:5, shift:6}, function () {
floginacct.val("");
floginacct.focus();
});
return false;
}
if ($.trim(fusername.val())==""){
layer.msg("用户名不能为空!", {time:1000, icon:5, shift:6}, function () {
fusername.val("");
fusername.focus();
});
return false;
}
if ($.trim(femail.val())==""){
layer.msg("邮箱不能为空!", {time:1000, icon:5, shift:6}, function () {
femail.val("");
femail.focus();
});
return false;
}
$.ajax( {
type : "POST",
url : "userController/doAddUser",
data : {
"loginacct" : floginacct.val(),
"username" : fusername.val(),
"email" : femail.val(),
},
beforeSend : function () {
adding = layer.msg('Loading', {icon: 16});
return true;
},
success : function (result) {
layer.close(adding);
if (result.success){
layer.msg("添加成功!", {time:1000, icon:6, shift:6});
window.location.href="userController/toUserList.htm";
}else {
layer.msg("添加失败!", {time:1000, icon:5, shift:6});
}
},
error : function (result) {
layer.msg(result.message, {time:4000, icon:5, shift:6});
},
});
});
$("#resetButton").click(function () {
$("#addForm")[0].reset();
});
</script>
</body>
</html>
4、编写userController的添加处理方法
/**
* 处理用户添加
* @param user
* @return
*/
@RequestMapping(value = "/doAddUser")
public @ResponseBody Object doAddUser(User user){
AjaxResult result = new AjaxResult();
try {
int i = userService.insert(user);
System.out.println(i);
if (i==1){
result.setSuccess(true);
}else{
result.setSuccess(false);
}
}catch (Exception e){
e.printStackTrace();
result.setSuccess(false);
result.setMessage("出现异常,请重新尝试!");
}
return result;
}
5、完善service层的处理方法
public int insert(User user) {
//生成事件
Date date = new Date();
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String format = dateFormat.format(date);
user.setCreatetime(format);
//生成默认密码
user.setUserpswd(MD5Util.digest("123"));
return userMapper.insert(user);
}
6、启动服务器查看效果
用户的修改
修改流程图
实现流程
1、在所有的用户的修改按钮中添加跳转路径。
2、在userController中添加方法接收删除用户的id,并将用户查出和修改页面一起返回。
/**
* 返回更新用户页面
* @return
*/
@RequestMapping(value = "/toUpdateUser")
public String toUpdateUser(Integer id,Map<String,User> map){
System.out.println(id);
User updateUser = userService.selectByPrimaryKey(id);
System.out.println(updateUser);
map.put("updateUser",updateUser);
return "user/updateUser";
}
3、新建updateUser.jsp文件,并编写异步请求方法提交修改数据。
updateUser.jsp页面内容
<%--
Created by IntelliJ IDEA.
User: 黄彬
Date: 2020/6/5
Time: 10:14
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
<base href="<%=basePath%>"/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/doc.min.css">
<style>
.tree li {
list-style-type: none;
cursor:pointer;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div><a class="navbar-brand" style="font-size:32px;" href="user.html">众筹平台 - 用户维护</a></div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li style="padding-top:8px;">
<div class="btn-group">
<button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i> ${sessionScope.user.username} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
<li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
<li class="divider"></li>
<li><a href="login.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
</ul>
</div>
</li>
<li style="margin-left:10px;padding-top:8px;">
<button type="button" class="btn btn-default btn-danger">
<span class="glyphicon glyphicon-question-sign"></span> 帮助
</button>
</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tree">
<ul style="padding-left:0px;" class="list-group">
<li class="list-group-item tree-closed" >
<a href="main.html"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
</li>
<li class="list-group-item">
<span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge" style="float:right">3</span></span>
<ul style="margin-top:10px;">
<li style="height:30px;">
<a href="userController/toUserList.htm" style="color:red;"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
</li>
<li style="height:30px;">
<a href="role.html"><i class="glyphicon glyphicon-certificate"></i> 角色维护</a>
</li>
<li style="height:30px;">
<a href="permission.html"><i class="glyphicon glyphicon-lock"></i> 许可维护</a>
</li>
</ul>
</li>
<li class="list-group-item tree-closed">
<span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge" style="float:right">3</span></span>
<ul style="margin-top:10px;display:none;">
<li style="height:30px;">
<a href="auth_cert.html"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a>
</li>
<li style="height:30px;">
<a href="auth_adv.html"><i class="glyphicon glyphicon-check"></i> 广告审核</a>
</li>
<li style="height:30px;">
<a href="auth_project.html"><i class="glyphicon glyphicon-check"></i> 项目审核</a>
</li>
</ul>
</li>
<li class="list-group-item tree-closed">
<span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span>
<ul style="margin-top:10px;display:none;">
<li style="height:30px;">
<a href="cert.html"><i class="glyphicon glyphicon-picture"></i> 资质维护</a>
</li>
<li style="height:30px;">
<a href="type.html"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a>
</li>
<li style="height:30px;">
<a href="process.html"><i class="glyphicon glyphicon-random"></i> 流程管理</a>
</li>
<li style="height:30px;">
<a href="advertisement.html"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a>
</li>
<li style="height:30px;">
<a href="message.html"><i class="glyphicon glyphicon-comment"></i> 消息模板</a>
</li>
<li style="height:30px;">
<a href="project_type.html"><i class="glyphicon glyphicon-list"></i> 项目分类</a>
</li>
<li style="height:30px;">
<a href="tag.html"><i class="glyphicon glyphicon-tags"></i> 项目标签</a>
</li>
</ul>
</li>
<li class="list-group-item tree-closed" >
<a href="param.html"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">数据列表</a></li>
<li class="active">修改</li>
</ol>
<div class="panel panel-default">
<div class="panel-heading">表单数据<div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-question-sign"></i></div></div>
<div class="panel-body">
<form id="updateForm">
<div class="form-group">
<label for="floginacct">登陆账号</label>
<input type="text" class="form-control" id="floginacct" value="${updateUser.loginacct}">
</div>
<div class="form-group">
<label for="fusername">用户名称</label>
<input type="text" class="form-control" id="fusername" value="${updateUser.username}">
</div>
<div class="form-group">
<label for="femail">邮箱地址</label>
<input type="email" class="form-control" id="femail" value="${updateUser.email}">
<p class="help-block label label-warning">请输入合法的邮箱地址, 格式为: xxxx@xxxx.com</p>
</div>
<button id="modifyButton" type="button" class="btn btn-success"><i class="glyphicon glyphicon-edit"></i> 修改</button>
<button id="resetButton" type="button" class="btn btn-danger"><i class="glyphicon glyphicon-refresh"></i> 重置</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">帮助</h4>
</div>
<div class="modal-body">
<div class="bs-callout bs-callout-info">
<h4>测试标题1</h4>
<p>测试内容1,测试内容1,测试内容1,测试内容1,测试内容1,测试内容1</p>
</div>
<div class="bs-callout bs-callout-info">
<h4>测试标题2</h4>
<p>测试内容2,测试内容2,测试内容2,测试内容2,测试内容2,测试内容2</p>
</div>
</div>
<!--
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
-->
</div>
</div>
</div>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script type="text/javascript" src="jquery/layer/layer.js"></script>
<script type="text/javascript">
$(function () {
$(".list-group-item").click(function(){
if ( $(this).find("ul") ) {
$(this).toggleClass("tree-closed");
if ( $(this).hasClass("tree-closed") ) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
});
});
$("#modifyButton").click(function () {
var floginacct =$("#floginacct");
var fusername =$("#fusername");
var femail =$("#femail");
if ($.trim(floginacct.val())==""){
layer.msg("账号不能为空!", {time:1000, icon:5, shift:6}, function () {
floginacct.val("");
floginacct.focus();
});
return false;
}
if ($.trim(fusername.val())==""){
layer.msg("用户名不能为空!", {time:1000, icon:5, shift:6}, function () {
fusername.val("");
fusername.focus();
});
return false;
}
if ($.trim(femail.val())==""){
layer.msg("邮箱不能为空!", {time:1000, icon:5, shift:6}, function () {
femail.val("");
femail.focus();
});
return false;
}
$.ajax( {
type : "POST",
url : "userController/doUpdateUser.do",
data : {
"loginacct" : floginacct.val(),
"username" : fusername.val(),
"email" : femail.val(),
"id" : "${updateUser.id}",
},
beforeSend : function () {
adding = layer.msg('Loading', {icon: 16});
return true;
},
success : function (result) {
layer.close(adding);
if (result.success){
layer.msg("修改成功!", {time:1000, icon:6, shift:6});
window.location.href="userController/toUserList.htm";
}else {
layer.msg("修改失败!", {time:1000, icon:5, shift:6});
}
},
error : function (result) {
layer.msg(result.message, {time:4000, icon:5, shift:6});
},
});
});
$("#resetButton").click(function () {
$("#updateForm")[0].reset();
});
</script>
</body>
</html>
4、接收用户数据并进行修改,并返回结果。
/**
* 处理用户修改
* @param user
* @return
*/
@RequestMapping(value = "/doUpdateUser")
public @ResponseBody Object doUpdateUser(User user){
AjaxResult result = new AjaxResult();
try{
int i = userService.updateByPrimaryKey(user);
if (i==1){
result.setSuccess(true);
}else{
result.setSuccess(false);
}
}catch (Exception e){
e.printStackTrace();
result.setSuccess(false);
result.setMessage("修改出错,请重新尝试!!!");
}
return result;
}
5、完善service层和Mapper映射问价的sql语句
public int updateByPrimaryKey(User user) {
return userMapper.updateByPrimaryKey(user);
}
<update id="updateByPrimaryKey" parameterType="com.bin.crowdfunding.bean.User" >
update t_user
set loginacct = #{loginacct,jdbcType=VARCHAR},
username = #{username,jdbcType=VARCHAR},
email = #{email,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
</update>
6、测试效果
用户的删除
先实现点击右边的按钮将用户删除
1、在userList.jsp中调用删除的异步请求函数。
content+=' <button type="button" οnclick="deleteUser('+user.id+',\''+user.username+'\')" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>';
2、编写异步请求函数体。
function deleteUser(id,loginacct) {
layer.confirm("确认要删除[" + loginacct + "]吗?", {icon: 3, title: '提示'}, function (cindex) {
layer.close(cindex);
$.ajax({
type : "post",
url : "userController/doDeleteUser.do",
data : {
"id" : id,
},
beforeSend : function () {
return true;
},
success :function (result) {
if (result.success){
layer.msg("删除成功!", {time:1000, icon:6, shift:6}); //弹出时间,图标,特效
window.location.href="userController/toUserList.htm";
}else {
layer.msg("删除失败!", {time:1000, icon:5, shift:6}); //弹出时间,图标,特效
}
},
error : function (result) {
layer.msg(result.message, {time:1000, icon:5, shift:6}); //弹出时间,图标,特效
}
});
},function (cindex) {
layer.close(cindex);
});
}
3、编写异步请求对应的处理方法。
/**
* 处理用户删除
* @param id
* @return
*/
@RequestMapping(value = "/doDeleteUser")
public @ResponseBody Object doDeleteUser(Integer id){
AjaxResult result = new AjaxResult();
try {
int i = userService.deleteByPrimaryKey(id);
if (i==1){
result.setSuccess(true);
}else {
result.setSuccess(false);
}
}catch (Exception e){
e.printStackTrace();
result.setSuccess(false);
result.setMessage("删除出现异常,请重新尝试!");
}
return result;
}
4、完善service层和Mapper映射文件后,启动服务器进行测试
实现多用户的批量删除
1、在全选框添加事件
2、编写事件处理
//添加事件处理
$("#allCheckbox").click(function () {
//获取多选框的值
var checkboxStatus = this.checked;
//将多选框的值赋给单选框
//$("tbody tr td input[type='checkbox']").attr("checked",checkboxStatus);
$("tbody tr td input[type='checkbox']").prop("checked",checkboxStatus);
});
3、编写删除按钮的异步请求处理
//添加按钮事件处理
$("#deleteBatchUserButton").click(function () {
//获取被选中的用户的id,被选中的才带checked属性
var selectedCheckbox = $("tbody tr td input:checked");
//判断用户长度
if (selectedCheckbox.length==0){
layer.msg("请选择删除的用户!", {time:1000, icon:5, shift:6}); //弹出时间,图标,特效
return false;
}
//将选中的用户的id拼串
var idStr="";
$.each(selectedCheckbox,function (index,user) {
if (index!=0){
idStr += "&";
}
idStr += "id="+user.id;
});
//执行操作
layer.confirm("确认要删除这些用户吗?", {icon: 3, title: '提示'}, function (cindex) {
layer.close(cindex);
$.ajax({
type : "post",
url : "userController/doDeleteBatchUser.do",
data : idStr,
beforeSend : function () {
return true;
},
success :function (result) {
if (result.success){
layer.msg("删除成功!", {time:1000, icon:6, shift:6}); //弹出时间,图标,特效
window.location.href="userController/toUserList.htm";
}else {
layer.msg("删除失败!", {time:1000, icon:5, shift:6}); //弹出时间,图标,特效
}
},
error : function (result) {
layer.msg(result.message, {time:1000, icon:5, shift:6}); //弹出时间,图标,特效
}
});
},function (cindex) {
layer.close(cindex);
});
});
4、实现userController对应的处理方法。
/**
* 批量删除用户
* @param id
* @return
*/
@RequestMapping(value = "/doDeleteBatchUser")
public @ResponseBody Object doDeleteBatchUser(Integer[] id){
AjaxResult result = new AjaxResult();
int sum = 0;
try {
for (Integer integer : id) {
int count = userService.deleteByPrimaryKey(integer);
sum += count;
}
if (sum==id.length){
result.setSuccess(true);
}else {
result.setSuccess(false);
}
}catch (Exception e){
e.printStackTrace();
result.setMessage("出现异常,请重新尝试!");
result.setSuccess(false);
}
return result;
}
5、测试效果