<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>角色设置</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<%@ include file="../taglibs.jsp" %>
<!--引入js脚本和所需要的样式文件-->
<link href="${ctx}/css/common/style1.css" style="text/css" rel="stylesheet">
<link href="${ctx}/css/dataTables/demo_page.css" style="text/css" rel="stylesheet">
<link href="${ctx}/css/dataTables/demo_table_jui.css" style="text/css" rel="stylesheet">
<link href="${ctx}/css/dataTables/demo_table.css" style="text/css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="js/dataTables/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/dataTables/jquery.dataTables.js"></script>
</head>
<!--嵌入分页的js代码-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#example').dataTable({
//iDisplayLength:1,//设置每页显示记录数
sPaginationType: "full_numbers",//设置分页按钮
//bJQueryUI: true, //设置样式
bStateSave: true
});
});
</script>
<body>
<!-- 查询区域 -->
<fieldset>
<legend>输入区域</legend>
<div class=" clearfix buttons" id="buttons">
<input type="button" class="sysBtn" value="查询" id="btnSearch" οnclick=" btnCheck()">
<input type="button" class="sysBtn" value="清空" id="btnExport" >
<input type="button" class="sysBtn" value="新增" id="btnLook" onClick="btnLook()">
<input type="button" class="sysBtn" value="修改" onClick="btnAlter()">
<input type="button" class="sysBtn" value="启用" onClick="startStop()">
<input type="button" class="sysBtn" value="停用" onClick="stop()">
</div>
<form class="feildset clearfix dataForm " id="userForm" action="findAllUserName.action">
<!-- 查询条件区域 -->
<ul class="c2 l120">
<li>
<label>用户名：</label>
<input id="bugName" name="userInfo.userName"/>
</li>
<li>
<label>真实姓名：</label>
<input id="bugRealName" name="userInfo.realName"/>
</li>
</ul>
</form>
</fieldset>
<!-- 显示区域 -->
<fieldset>
<legend>角色管理</legend>
<form class="feildset clearfix dataForm ">
<table class="gridtable" style="width:100%"id="example">
<thead>
<tr>
<th width="5%" align="center"><input type="checkbox" οnclick="selectAll()" id="checkbox"/></th>
<th width="10%" align="center">用户名</th>
<th width="10%" align="center">真实姓名</th>
<th width="10%" align="center"> 密码</th>
<th width="5%" align="center"> 是否启用</th>
<th width="10%" align="center"> 电子邮箱</th>
<th width="10%" align="center"> 联系电话</th>
<th width="10%" align="center"> 手机号码</th>
<th width="10%" align="center"> 备注</th>
</tr>
</thead>
<tbody>
<c:forEach var="user" items="${userList}">
<tr>
<td align="center"><input type="checkbox" value="${user.userId}" name="userId"/></td>
<td align="center">${user.userName} </td>
<td align="center">${user.realName}</td>
<td align="center">${user.password}</td>
<td align="center">
<c:if test="${user.whetherStop==true}">是 </c:if>
<c:if test="${user.whetherStop==false}">否 </c:if>
</td>
<td align="center">${user.email }</td>
<td align="center">${user.telephone }</td>
<td align="center">${user.mobilephone }</td>
<td align="center">${user.remarks }</td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
</fieldset>
</body>
<script type="text/javascript">
var pcSelectId;
function btnLook(){
window.open("jsp/systemManager/user_add.jsp","新增", "height=250, width=1000, top=200, left=250, toolbar=no,menubar=no, scrollbars=yes, resizable=no,location=no, status=no");
}
function btnCheck(){
$("#userForm").submit();
}
function btnAlter(){
var i=0;
$("input[name='userId']").each(function(){
if($(this).attr("checked"))
{i=i+1;
pcSelectId=$(this).val();
}});
if(i==1){
window.open("${ctx}/updateUser.action?id="+pcSelectId,"修改", "height=350, width=1000, top=200, left=250, toolbar=no,menubar=no, scrollbars=yes, resizable=no,location=no, status=no");
}else
alert("修改的选项只能选择一个");
}
function startStop(){
var IDs="";
$("input[name='userId']").each(function(){
if($(this).attr("checked"))
{
IDs=IDs+$(this).val()+",";
}});
document.location.href='${ctx}/startUser.action?id='+IDs;
}
function stop(){
var IDs="";
$("input[name='userId']").each(function(){
if($(this).attr("checked"))
{
IDs=IDs+$(this).val()+",";
}});
document.location.href='${ctx}/stopUser.action?id='+IDs;
}
function selectAll(){
var interArr = document.getElementsByName("userId");
for ( var i = 0; i < interArr.length; i++) {
if (!interArr[i].checked) {
interArr[i].checked = true;
}
}
var checkbox=document.getElementById("checkbox");
if(!checkbox.checked){
for ( var i = 0; i < interArr.length; i++) {
interArr[i].checked = false;
}
}
}
</script>
</html>
注：table标签必须有id值，和 thead tbody标签
红色标注部分是涉及到前台分页的内容
参考：http://www.blogjava.net/javagrass/archive/2011/08/05/355840.html
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
