用户列表（一）

最新推荐文章于 2024-03-03 14:06:37 发布

chunta0922

最新推荐文章于 2024-03-03 14:06:37 发布

阅读量380

点赞数

原文链接：https://my.oschina.net/u/4092476/blog/3032214

版权

1. 新建 user.jsp 、在 WebContent 中放入 bootstrap 的文件

2. 在 user.jsp 引入 jquery 、 bootstrap

3.引入jstl的C标签（展示列表会用到c:foreach）

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

html代码

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户列表</title>
<link href="${ctx }/css/bootstrap.min.css" type="text/css"
   rel="stylesheet" />
<link href="${ctx }/css/bootstrap-theme.min.css" type="text/css"
   rel="stylesheet" />
<script src="${ctx }/js/jquery.min.js" type="text/javascript"></script>
<script src="${ctx }/js/bootstrap.min.js" type="text/javascript"></script>

<link href="${ctx }/css/public.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function showAddDiv(){
   $(".box").show();//显示div
   // document.getElementById("divId").style.display="block";
}

//保存
function create(){
   $.post("${ctx}/user/create.do",
           $("#saveForm").serialize(),function(data){//form表单参数可以直接通过这种提交
       if(data){
           alert("保存成功");
           window.location.reload();
       }else{
           alert("失败");
       }
   });
}

</script>

</head>
<body>
   
   <div class="banner">
       
       <div class="title">
           欢迎，<span id="user">赵琦</span><a href="#">退出</a>
       </div>
   </div>

<div id="main">
       <div id="left">
           <ul>
               <li><img class="icon1" src="${ctx }/img/icon01.png" /> <a
                   href="#">用户管理</a></li>
               <li><img class="icon1" src="${ctx }/img/icon02.png" /> <a
                   href="#">修改密码</a></li>
           </ul>
       </div>
       
       <div id="right">
           <button type="button" class="btn btn-primary" οnclick="showAddDiv()">新增</button>
           <table class="table table-bordered">
               <thead>
                   <tr>
                       <th>id</th>
                       <th>用户名</th>
                       <th>真实姓名</th>
                       <th>删除</th>
                       <th>编辑</th>
                   </tr>
               </thead>
               <tbody>
                   
                   
                   <c:forEach items="${users }" var="row">
                       <tr>
                           <td>${row.id }</td>
                           <td>${row.username }</td>
                           <td>${row.realname }</td>
                           <td><a href="#" class="btn btn-primary"
                               οnclick="deleteUser(${row.id})">删除</a></td>
                           <td><a href="#" class="btn btn-primary"
                               οnclick="edit(${row.id})">编辑</a></td>
                       </tr>
                   </c:forEach>
               </tbody>
           </table>
       </div>
   </div>

</body>
</html>

css代码

@charset "utf-8";
/* CSS Document */
/* 基础选择器：id选择器# class选择器 . 标签选择器 */
/* *通配符选择器，就是应用在html所有标签，所有空白都清空 */
*{
padding:0px;
margin:0px;
}

.banner{
   width:100%;
   height:100px;
   background-image:url(../img/bgTitle.png);
   /*background-color:#FF6633;*/
}
.title{
   position: absolute;/* 绝对位置，针对父标签的位置；fixed,相对浏览器的 */
top: 60px;
right: 30px;/* 设置绝对位置，可以设置上边top、right、left、bottom */
   color:#FFFFFF;
   font-weight:bolder;
   font-size:16px;
}

#main{
   background-color:#EFEFEF;/* 浅灰 */
}
#left{
   width:12%;
   height:900px;
   background-color:#F2F2F2;
   float:left;/* 为了让div左右排列 */
   border-right: 1px solid #dedede;
   padding-bottom:100px;
}
#left ul{
   list-style:none;/* 去掉默认的小黑点 */
   width:100%;
}
#left ul li{
   height:70px;
   line-height:70px;/* 垂直居中 */
   background-color:#F9F9F9;
   border-bottom: 1px solid #dedede;/* 设置下边 */
   text-align:center;
   position:relative;/* 相对位置，是为了里面那个小图标的位置固定*/
}
#left ul li:hover{
   background-color:#FFFFFF;
}
.icon1{
   position: absolute;
left: 30px;
   top:25px;
   display:block;/* 改成盒子模型，可以使一些例如left、top、margin这些样式管用，例如span也不是盒子模型 */
}
#left ul li a{
   text-decoration:none;/* 去下划线 */
   color:#666666;
}
#left ul li a:hover{
   color:#FF6633;
}

#right{
   float:left;
   width:86%;
   /*height:1300px;*/
   background-color:#fff;
   padding:10px;
}

#loginDiv{
   height:540px;
   width:300px;
   background-color:#FFFFFF;
   padding:30px;
   position:fixed;
left: 40%;
top: 25%;
border: 1px solid #CCC;
}

.box{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
display: none;
}

.logTitle{
   height:40px;
   border-bottom:#ffb447 solid 1px;
   font-size:28px;
   margin-bottom:40px;
}
.formInput{
   margin-bottom:20px;
   height:40px;
   width:100%;
}
.formInput img{
   position: absolute;
padding-top: 12px;
padding-left: 8px;
}
.formInput input,select{
   font-size:16px;
   width:100%;
   text-indent:5em;
   height:40px;
}

.formInput span{
   color:#999999;
   position: absolute;
padding-top: 12px;
padding-left: 8px;
}
.formButton {
   margin-top: 20px;
border: 0px;
font-size: 18px;
width: 100%;
height: 40px;
   background-color:#ffb447;
   color:#FFFFFF;
}

转载于:https://my.oschina.net/u/4092476/blog/3032214

chunta0922

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用户列表（一）

1. 新建 user.jsp 、在 WebContent 中放入 bootstrap 的文件 2. 在 user.jsp 引入 jquery 、 bootstrap <link href="${pageContext.request.con...
复制链接

扫一扫