页面显示修改及ajax相关——实习日志7.18
修改aside.jsp
头部引入
<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
然后在“在线”上加用户名
<p> <security:authentication property="principal.username"></security:authentication> </p>
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8" isELIgnored="false"%> 3 <%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %> 4 <aside class="main-sidebar"> 5 <!-- sidebar: style can be found in sidebar.less --> 6 <section class="sidebar"> 7 <!-- Sidebar user panel --> 8 <div class="user-panel"> 9 <div class="pull-left image"> 10 <img src="${pageContext.request.contextPath}/img/user2-160x160.jpg" 11 class="img-circle" alt="User Image"> 12 </div> 13 <div class="pull-left info"> 14 <p> 15 <security:authentication property="principal.username"></security:authentication> 16 </p> 17 <a href="#"><i class="fa fa-circle text-success"></i> 在线</a> 18 </div> 19 </div> 20 21 <!-- sidebar menu: : style can be found in sidebar.less --> 22 <ul class="sidebar-menu"> 23 <li class="header">菜单</li> 24 <li id="admin-index"><a 25 href="#"><i 26 class="fa fa-dashboard"></i> <span>首页</span></a></li> 27 28 <li class="treeview"><a href="#"> <i class="fa fa-cogs"></i> 29 <span>系统管理</span> <span class="pull-right-container"> <i 30 class="fa fa-angle-left pull-right"></i> 31 </span> 32 </a> 33 <ul class="treeview-menu"> 34 <li id="system-setting"> 35 <security:authorize access="hasRole('ADMIN')"> 36 <a 37 href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5"> <i 38 class="fa fa-circle-o"></i> 用户管理 39 </a> 40 </security:authorize> 41 </li> 42 <li id="system-setting"><a 43 href="#"> <i 44 class="fa fa-circle-o"></i> 角色管理 45 </a></li> 46 47 </ul> 48 49 </li> 50 51 52 </ul> 53 </section> 54 <!-- /.sidebar --> 55 </aside>
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8" isELIgnored="false"%> 3 <%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %> 4 5 <!-- 页面头部 --> 6 <header class="main-header"> 7 <!-- Logo --> 8 <a href="all-admin-index.html" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> 9 <span class="logo-mini"><b>数据</b></span> <!-- logo for regular state and mobile devices --> 10 <span class="logo-lg">中软<b>ETC</b>用户管理系统</span> 11 </a> 12 <!-- Header Navbar: style can be found in header.less --> 13 <nav class="navbar navbar-static-top"> 14 <!-- Sidebar toggle button--> 15 <a href="#" class="sidebar-toggle" data-toggle="offcanvas" 16 role="button"> <span class="sr-only">Toggle navigation</span> 17 </a> 18 19 <div class="navbar-custom-menu"> 20 <ul class="nav navbar-nav"> 21 22 <li class="dropdown user user-menu"><a href="#" 23 class="dropdown-toggle" data-toggle="dropdown"> <img 24 src="${pageContext.request.contextPath}/img/user2-160x160.jpg" 25 class="user-image" alt="User Image"> <span class="hidden-xs"> 26 <security:authentication property="principal.username"></security:authentication> 27 </span> 28 </a> 29 <ul class="dropdown-menu"> 30 <!-- User image --> 31 <li class="user-header"><img 32 src="${pageContext.request.contextPath}/img/user2-160x160.jpg" 33 class="img-circle" alt="User Image"></li> 34 35 <!-- Menu Footer--> 36 <li class="user-footer"> 37 <div class="pull-left"> 38 <a href="#" class="btn btn-default btn-flat">修改密码</a> 39 </div> 40 <div class="pull-right"> 41 <a href="${pageContext.request.contextPath}/logout.do" 42 class="btn btn-default btn-flat">注销</a> 43 </div> 44 </li> 45 </ul></li> 46 47 </ul> 48 </div> 49 </nav> 50 </header> 51 <!-- 页面头部 /-->
二、ajax应用，批量删除
导入js包，里面有
先在user-list.jsp中写好批量删除的页面和相关js函数以及ajax请求
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8" isELIgnored="false"%> 3 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5 <html> 6 <head> 7 <!-- 页面meta --> 8 <meta charset="utf-8"> 9 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 10 11 <title>数据 - AdminLTE2定制版</title> 12 <meta name="description" content="AdminLTE2定制版"> 13 <meta name="keywords" content="AdminLTE2定制版"> 14 15 <!-- Tell the browser to be responsive to screen width --> 16 <meta 17 content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" 18 name="viewport"> 19 20 <link rel="stylesheet" 21 href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css"> 22 <link rel="stylesheet" 23 href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css"> 24 <link rel="stylesheet" 25 href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css"> 26 <link rel="stylesheet" 27 href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css"> 28 <link rel="stylesheet" 29 href="${pageContext.request.contextPath}/plugins/morris/morris.css"> 30 <link rel="stylesheet" 31 href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css"> 32 <link rel="stylesheet" 33 href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css"> 34 <link rel="stylesheet" 35 href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css"> 36 <link rel="stylesheet" 37 href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"> 38 <link rel="stylesheet" 39 href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css"> 40 <link rel="stylesheet" 41 href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css"> 42 <link rel="stylesheet" 43 href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css"> 44 <link rel="stylesheet" 45 href="${pageContext.request.contextPath}/plugins/select2/select2.css"> 46 <link rel="stylesheet" 47 href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css"> 48 <link rel="stylesheet" 49 href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css"> 50 <link rel="stylesheet" 51 href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css"> 52 <link rel="stylesheet" 53 href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css"> 54 <link rel="stylesheet" 55 href="${pageContext.request.contextPath}/css/style.css"> 56 <link rel="stylesheet" 57 href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css"> 58 <link rel="stylesheet" 59 href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css"> 60 <link rel="stylesheet" 61 href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css"> 62 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> 63 <script type="text/javascript"> 64 function deleteAll() { 65 var checkNum=$("input[name='ids']:checked").length; 66 if(checkNum==0){ 67 alert("请至少选择一项"); 68 return; 69 } 70 if(confirm("确定要删除吗？")){ 71 var userlist = new Array(); 72 $("input[name='ids']:checked").each(function () { 73 userlist.push($(this).val()) 74 75 }); 76 } 77 $.ajax({ 78 type:"post", 79 url:"${pageContext.request.contextPath}/user/deleteAll.do", 80 data:{ 81 userlist:userlist.toString() 82 }, 83 success:function () { 84 alert("删除成功！"); 85 location.reload(); 86 87 }, 88 error:function () { 89 alert("删除失败！"); 90 91 } 92 }) 93 } 94 </script> 95 </head> 96 97 <body class="hold-transition skin-blue sidebar-mini"> 98 99 <div class="wrapper"> 100 101 <!-- 页面头部 --> 102 <jsp:include page="header.jsp"></jsp:include> 103 <!-- 页面头部 /--> 104 105 <!-- 导航侧栏 --> 106 <jsp:include page="aside.jsp"></jsp:include> 107 <!-- 导航侧栏 /--> 108 109 <!-- 内容区域 --> 110 <div class="content-wrapper"> 111 112 <!-- 内容头部 --> 113 <section class="content-header"> 114 <h1> 115 用户管理 <small>全部用户</small> 116 </h1> 117 <ol class="breadcrumb"> 118 <li><a href="#"><i 119 class="fa fa-dashboard"></i> 首页</a></li> 120 <li><a 121 href="#">用户管理</a></li> 122 123 <li class="active">全部用户</li> 124 </ol> 125 </section> 126 <!-- 内容头部 /--> 127 128 <!-- 正文区域 --> 129 <section class="content"> <!-- .box-body --> 130 <div class="box box-primary"> 131 <div class="box-header with-border"> 132 <h3 class="box-title">列表</h3> 133 </div> 134 135 <div class="box-body"> 136 137 <!-- 数据表格 --> 138 <div class="table-box"> 139 140 <!--工具栏--> 141 <div class="pull-left"> 142 <div class="form-group form-inline"> 143 <div class="btn-group"> 144 <button type="button" class="btn btn-default" title="新建" 145 onclick="location.href='${pageContext.request.contextPath}/pages/user-add.jsp'" > 146 <i class="fa fa-file-o"></i> 新建 147 </button> 148 149 <button type="button" class="btn btn-default" title="刷新" onclick="deleteAll()"> 150 <i class="fa fa-refresh"></i> 删除 151 </button> 152 </div> 153 </div> 154 </div> 155 <form action="#" 156 method="post"> 157 <div class="col-md-4 data1"> 158 <input type="text" class="form-control" name="name" 159 placeholder="cname" value=""> 160 </div> 161 <button type="submit" class="btn bg-maroon">搜索</button> 162 </form> 163 <!--工具栏/--> 164 165 <!--数据列表--> 166 <table id="dataList" 167 class="table table-bordered table-striped table-hover dataTable"> 168 <thead> 169 <tr> 170 <th class="" style="padding-right: 0px"><input 171 id="selall" type="checkbox" class="icheckbox_square-blue"> 172 </th> 173 <th class="sorting_asc">ID</th> 174 <th class="sorting_desc">用户名</th> 175 <th class="sorting_asc sorting_asc_disabled">密码</th> 176 <th class="text-center">操作</th> 177 </tr> 178 </thead> 179 <tbody> 180 <c:forEach var="user" items="${pageInfos.list}"> 181 <tr> 182 <td><input name="ids" type="checkbox" value="${user.id}"></td> 183 <td>${user.id}</td> 184 <td>${user.name}</td> 185 <td>${user.password}</td> 186 <td class="text-center"> 187 <a href="${pageContext.request.contextPath}/user/toUpdate.do?id=${user.id}" class="btn bg-olive btn-xs">更新</a> 188 <a href="${pageContext.request.contextPath}/user/delete.do?id=${user.id}" class="btn bg-olive btn-xs">删除</a> 189 <a href="#" class="btn bg-olive btn-xs">添加角色</a> 190 </td> 191 </tr> 192 </c:forEach> 193 </tbody> 194 <!-- 195 <tfoot> 196 <tr> 197 <th>Rendering engine</th> 198 <th>Browser</th> 199 <th>Platform(s)</th> 200 <th>Engine version</th> 201 <th>CSS grade</th> 202 </tr> 203 </tfoot>--> 204 </table> 205 <!--数据列表/--> 206 207 </div> 208 <!-- 数据表格 /--> 209 210 </div> 211 <!-- /.box-body --> 212 <div class="box-tools pull-right"> 213 <ul class="pagination"> 214 <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5" aria-label="Previous">首页</a></li> 215 <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfos.pageNum-1}&size=5">上一页</a></li> 216 <c:forEach begin="1" end="${pageInfos.pages}" var="pageNum"> 217 <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageNum}&size=5">${pageNum}</a></li> 218 </c:forEach> 219 <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfos.pageNum+1}&size=5">下一页</a></li> 220 <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfos.pages}&size=5" aria-label="Next">尾页</a></li> 221 </ul> 222 </div> 223 224 </div> 225 <!-- /.box-footer--> 226 227 <!--</div>--> 228 229 </section> 230 <!-- 正文区域 /--> 231 232 </div> 233 <!-- @@close --> 234 <!-- 内容区域 /--> 235 236 <!-- 底部导航 --> 237 <footer class="main-footer"> 238 <div class="pull-right hidden-xs"> 239 <b>Version</b> 1.0.8 240 </div> 241 <strong>Copyright © 2014-2017 <a 242 href="http://www.itcast.cn">研究院研发部</a>. 243 </strong> All rights reserved. </footer> 244 <!-- 底部导航 /--> 245 246 </div> 247 248 <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script> 249 <script src="../plugins/jQueryUI/jquery-ui.min.js"></script> 250 <script> 251 $.widget.bridge('uibutton', $.ui.button); 252 </script> 253 <script src="../plugins/bootstrap/js/bootstrap.min.js"></script> 254 <script src="../plugins/raphael/raphael-min.js"></script> 255 <script src="../plugins/morris/morris.min.js"></script> 256 <script src="../plugins/sparkline/jquery.sparkline.min.js"></script> 257 <script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script> 258 <script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> 259 <script src="../plugins/knob/jquery.knob.js"></script> 260 <script src="../plugins/daterangepicker/moment.min.js"></script> 261 <script src="../plugins/daterangepicker/daterangepicker.js"></script> 262 <script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script> 263 <script src="../plugins/datepicker/bootstrap-datepicker.js"></script> 264 <script 265 src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script> 266 <script 267 src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> 268 <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script> 269 <script src="../plugins/fastclick/fastclick.js"></script> 270 <script src="../plugins/iCheck/icheck.min.js"></script> 271 <script src="../plugins/adminLTE/js/app.min.js"></script> 272 <script src="../plugins/treeTable/jquery.treetable.js"></script> 273 <script src="../plugins/select2/select2.full.min.js"></script> 274 <script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script> 275 <script 276 src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script> 277 <script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script> 278 <script 279 src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script> 280 <script src="../plugins/bootstrap-markdown/js/markdown.js"></script> 281 <script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script> 282 <script src="../plugins/ckeditor/ckeditor.js"></script> 283 <script src="../plugins/input-mask/jquery.inputmask.js"></script> 284 <script 285 src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script> 286 <script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script> 287 <script src="../plugins/datatables/jquery.dataTables.min.js"></script> 288 <script src="../plugins/datatables/dataTables.bootstrap.min.js"></script> 289 <script src="../plugins/chartjs/Chart.min.js"></script> 290 <script src="../plugins/flot/jquery.flot.min.js"></script> 291 <script src="../plugins/flot/jquery.flot.resize.min.js"></script> 292 <script src="../plugins/flot/jquery.flot.pie.min.js"></script> 293 <script src="../plugins/flot/jquery.flot.categories.min.js"></script> 294 <script src="../plugins/ionslider/ion.rangeSlider.min.js"></script> 295 <script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script> 296 <script> 297 $(document).ready(function() { 298 // 选择框 299 $(".select2").select2(); 300 301 // WYSIHTML5编辑器 302 $(".textarea").wysihtml5({ 303 locale : 'zh-CN' 304 }); 305 }); 306 307 // 设置激活菜单 308 function setSidebarActive(tagUri) { 309 var liObj = $("#" + tagUri); 310 if (liObj.length > 0) { 311 liObj.parent().parent().addClass("active"); 312 liObj.addClass("active"); 313 } 314 } 315 316 $(document) 317 .ready( 318 function() { 319 320 // 激活导航位置 321 setSidebarActive("admin-datalist"); 322 323 // 列表按钮 324 $("#dataList td input[type='checkbox']") 325 .iCheck( 326 { 327 checkboxClass : 'icheckbox_square-blue', 328 increaseArea : '20%' 329 }); 330 // 全选操作 331 $("#selall") 332 .click( 333 function() { 334 var clicks = $(this).is( 335 ':checked'); 336 if (!clicks) { 337 $( 338 "#dataList td input[type='checkbox']") 339 .iCheck( 340 "uncheck"); 341 } else { 342 $( 343 "#dataList td input[type='checkbox']") 344 .iCheck("check"); 345 } 346 $(this).data("clicks", 347 !clicks); 348 }); 349 }); 350 </script> 351 </body> 352 353 </html>
在IUserInfoDao中定义deleteAll方法
void deleteAll(List list);
在UserMapper.xml实现方法
<delete id="deleteAll" parameterType="list">
delete from userinfo where id in
<foreach collection="list" item="id" open="(" close=")" separator=",">
#{id}
</foreach>
</delete>
在IUserInfoService中定义方法
void deleteAll(List list);
在UserInfoService中实现
@Override
public void deleteAll(List list) {
userInfoDao.deleteAll(list);
}
在UserInfoController中控制
其中一定要记得加上@ResponseBody以保证返回的是json格式，否则前端判断的时候会认为删除失败
@RequestMapping("deleteAll.do")
@ResponseBody
public String deleteAll(String userlist){
String[] strs=userlist.split(",");
List<Integer> ids=new ArrayList<>();
for(int i=0;i<strs.length;i++){
ids.add(Integer.parseInt(strs[i]));
}
userInfoService.deleteAll(ids);
return "";
}
