靠山jsp userList.jsp
后台jsp userList.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
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>
<head>
<base href="<%=basePath%>">
<title></title>
<link rel="stylesheet" href="admin/css/basic.css" type="text/css" />
<link rel="stylesheet" href="admin/css/list.css" type="text/css" />
<script type="text/javascript" src="admin/js/userList.js"></script>
</head>
<body>
<form action="userList?userId=${userId}&levelId=${levelId}&pageIndex=${pageIndex}" method="post">
<div class="show" style=" height:140px; display: none; " id="show">
</div>
</form>
<div class="list">
<table cellpadding="0" cellspacing="0">
<tr class="search">
<td colspan="8">
<form action="userList?userId=${userId}" method="post">
<select name="levelId">
<option value="0">--全部--</option>
<c:forEach var="item" items="${ulList }" varStatus="i">
<option value="${item.user_leve_id}" <c:if test="${item.user_leve_id eq levelId}">selected="selected"</c:if>>${item.user_leve_content}</option>
</c:forEach>
</select> <input type="submit" class="submit" value="确定" />
</form>
<form action="userList?levelId=${levelId}" method="post">
<input type="text" class="text" name="userId" value="${userId}" /> <input type="submit"
class="submit" value="搜索" />
</form></td>
</tr>
<tr class="title">
<td>用户编号</td>
<td>密码</td>
<td>用户姓名</td>
<td>电话</td>
<td>手机</td>
<td>电子邮箱</td>
<td>用户级别</td>
<td>操作</td>
</tr>
<c:forEach var="item" items="${uList }" varStatus="i">
<tr ondblclick="javascript:showSql('${item.user_id }');" class="content <c:if test="${i.index %2 ne 0 }">colorBg</c:if>">
<td>${item.user_id }</td>
<td>${item.password }</td>
<td><c:if test="${item.username eq null }">null</c:if><c:if test="${item.username ne null }">${item.username }</c:if></td>
<td><c:if test="${item.tel eq null }">null</c:if><c:if test="${item.tel ne null }">${item.tel }</c:if></td>
<td><c:if test="${item.phone eq null }">null</c:if><c:if test="${item.phone ne null }">${item.phone }</c:if></td>
<td><c:if test="${item.email eq null }">null</c:if><c:if test="${item.email ne null }">${item.email }</c:if></td>
<td>${item.leve_content }</td>
<td><a href="javascript:if(confirm('是否注销该账号')){location.href='userList?logout=${item.user_id }';}"><img src="admin/images/logout.png" width="22"
height="22" />
</a>
</td>
</tr>
</c:forEach>
<tr class="page">
<td colspan="8"><em class="f_r"> <a href="userList?userId=${userId}&levelId=${levelId}&pageIndex=1">首页</a> <a
href="userList?userId=${userId}&levelId=${levelId}&pageIndex=${pageIndex-1}">上一页</a> <a href="userList?userId=${userId}&levelId=${levelId}&pageIndex=${pageIndex+1}">下一页</a> <a href="userList?userId=${userId}&levelId=${levelId}&pageIndex=${end}">尾页</a> </em> <i>
共${totalCount}条数据(共有${end}页，现在是第${pageIndex}页) </i></td>
</tr>
</table>
</div>
</body>
</html>
/* CSS Document */
.submit{ background:#f7661f; color:#fff; text-align:center; width:46px; height:21px; line-height:21px; border:none; border-radius:3px; font-family:"Arial";}
.submit:hover{ background:#ff971c;}
.show{ width:1100px; margin:0 auto;}
.show table{ width:1100px; background:#FFF; border-top:1px solid #ccc; border-left:1px solid #ccc; position:fixed;top:0;margin:0 auto;}
.show table td{ height:21px; text-align:center; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}
.show table .explain td{ background:#f4f4f4; font-family:"微软雅黑"; color:#333; font-weight:bold;}
.show table .item .key{ background:#436da8; color:#fff; font-family:"微软雅黑";}
.show table .item .value{ color:#333; font-family:"微软雅黑";}
.show table .item .value input{ color:#c00; border:none; font-family:"微软雅黑";}
.show table .item .value select{ color:#c00; border:none; font-family:"微软雅黑";}
.show table .item .value select option{ color:#c00; border:none; font-family:"微软雅黑";}
.show table .update td{ height:28px; padding-right:10px;}
.list{ width:1100px; padding-bottom:50px; padding-top:13px; margin:0 auto;}
.list table{width:100%; border:1px solid #ccc;}
.search{ background:#f4f4f4; height:34px;}
.search form{ display:inline; margin-left:10px; margin-right:8px;}
.search .text{ border:1px solid #ccc; height:18px; line-height:18px; padding-left:6px; font-family:"Arial"; width:80px;}
.search select{ border:1px solid #ccc; height:21px; line-height:18px;}
.title td{ background:#436da8; color:#fff; font-family:"微软雅黑"; text-align:center; height:24px; line-height:24px;}
.content td{ color:#333; font-family:"微软雅黑"; text-align:center; height:36px; line-height:24px;}
.content:hover td{ background:#ff971c; color:#000;}
.content td input{ color:#c00; border:none; font-family:"微软雅黑"; padding-left:4px;}
.content td select{ color:#c00; border:none; font-family:"微软雅黑";}
.content td option{ color:#c00; border:none; font-family:"微软雅黑";}
.colorBg td{ background:#f5f5f5;}
.page{ height:30px; }
.page td{ padding-left:10px; padding-right:10px; border-top:1px solid #436da8;}
.page td em{ margin-right:8px;}
.page td em a{ border:1px solid #eee; color:#666; padding:2px 3px; margin-left:8px; font-family:"Arial";}
.page td em a:hover{ color:#f60; border:1px solid #f60;}
.page td i{ color:#999; font-family:"微软雅黑"; padding-left:8px;}
// JavaScript Document
function $(id){
return document.getElementById(id);
}
function showSql(userId){
var show = $("show");
show.style.display='block';
show.innerHTML="";
var xmlHttp = new XMLHttpRequest();
var url = "ajaxUserList?userId="+escape(userId);
xmlHttp.open("GET", url);//设置一个请求
xmlHttp.onreadystatechange = function() { //设置请求完成之后处理的回调函数
if (xmlHttp.readyState == 4) {//数据返回完毕
if (xmlHttp.status == 200) {//HTTP操作正常
var text = xmlHttp.responseText;//接收返回的内容
show.innerHTML=text;
}
}
};
xmlHttp.send(null);//发送请求，不传递任何参数
}
效果图：