页面显示修改及ajax相关——实习日志7.18

阳光穿透心脏的1/2处 2021-10-19 04:48 188阅读 0赞

修改aside.jsp

*头部引入*

<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

然后在“在线”上加用户名

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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    
     6    <section class="sidebar">
     7       
     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       
    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    
    55 </aside>

aside.jsp

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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    
     8    <a href="all-admin-index.html" class="logo"> 
     9       <span class="logo-mini"><b>数据</b></span> 
    10       <span class="logo-lg">中软<b>ETC</b>用户管理系统</span>
    11    </a>
    12    
    13    <nav class="navbar navbar-static-top">
    14       
    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                   
    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                   
    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

header.jsp

### 二、ajax应用，批量删除 ###

导入js包，里面有  
先在user-list.jsp中写好批量删除的页面和相关js函数以及ajax请求

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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 
      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 
     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"> 
    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                         
    204                      </table>
    205                      
    206 
    207                   </div>
    208                   
    209 
    210                </div>
    211                
    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                
    226 
    227             
    228 
    229             </section>
    230             
    231 
    232          </div>
    233          
    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>

user-list.jsp

在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 "";  
　　\}

转载于:https://www.cnblogs.com/developing/p/11210172.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211018/be2240d6cda1461fb70a0204e74f24c4.png