您的位置：首页 > 其它
Select选择后，刷新页面保存上一次选择内容

2016-01-19 19:43 791 查看
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!doctype html>
<html class="no-js">
<head>
<base href="<%=basePath%>" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>-用户管理</title>
<meta name="description" content="这是一个 index 页面">
<meta name="keywords" content="index">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed"
href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="" />
<link rel="stylesheet" href="assets/css/bootstrap-combined.min.css">

<link rel="stylesheet" href="assets/css/amazeui.min.css" />
<link rel="stylesheet" href="assets/css/admin.css">
<link rel="stylesheet" href="assets/css/app.css">

</head>
<body onload="selectIndex();">
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
以获得更好的体验！</p>
<![endif]-->

<%@ include file="/WEB-INF/include/header.jsp"%>

<div class="am-cf admin-main">
<%@ include file="/WEB-INF/include/menu.jsp"%>

<!-- content start -->
<div class="admin-content">

<div class="am-cf am-padding">
<div class="am-fl am-cf">
<strong class="am-text-primary am-text-lg">用户管理</strong>
</div>
</div>
<div class="am-g">
<div class="am-u-md-6 am-cf">
<div class="am-fl am-cf">
<form id="selectorForm" action="service/user/index" method="post">
<div class="am-btn-toolbar am-fl">
<div class="am-form-group am-margin-left am-fl">
<select name="device_type_selector" id="device_type_selector" onchange="saveSelectIndex();">
<option value="0">--所有设备--</option>
<c:forEach items="${deviceTypes }" var="deviceType">
<c:choose>
<c:when
test="${deviceType.typeIndex eq device_type_selector}">
<option value="${deviceType.typeIndex }" selected>${deviceType.typeName }</option>
</c:when>
<c:otherwise>
<option value="${deviceType.typeIndex }">${deviceType.typeName }</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
</div>
<div class="am-form-group am-margin-left am-fl">
<select name="register_type_selector" onchange="saveSelectIndex();"
id="register_type_selector" >
<option  value="" >--注册渠道--</option>
<option  value="0">正常注册</option>
<option  value="1">QQ注册</option>
<option  value="3">微信注册</option>
</select>
</div>
<c:choose>
<c:when test="${sessionScope.admin.company_id eq 0 }">
<div class="am-form-group am-margin-left am-fl">
<select name="channel_type_selector" onchange="saveSelectIndex();"
id="channel_type_selector">
<option value="">--channel--</option>
<option value="9999">9999</option>
<option value="9998">9998</option>
</select>
</div>
</c:when>
</c:choose>
<div class="am-form-group am-margin-left am-fl">
查询条件： <input id="searchKey" />
</div>
<input type="hidden" id="page" name="page">
<div class="am-form-group am-margin-left am-fl">
<input id="searchButten" type="button" value="查询" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class="am-g">
<div class="am-u-sm-12">
<table
class="am-table am-table-bd am-table-striped admin-content-table">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>注册邮箱</th>
<th>性别</th>
<th>最近登录时间</th>
<th>最近登录IP</th>
<th>管理</th>
</tr>
</thead>
<tbody id="ttbody">
<c:forEach items="${allusers}" var="alluser" begin="0"
varStatus="status">
<tr>
<td>${alluser.user_id}</td>
<td><a href="service/user/show?user_id=${alluser.user_id}">${alluser.nickname}</a></td>
<td>${alluser.user_mail}</td>
<td>${alluser.user_sex==0?"女":"男"}</td>
<td>${alluser.latest_login_time}</td>
<td>${alluser.latest_login_ip}</td>
<td>
<div class="am-dropdown" data-am-dropdown>
<button
class="am-btn am-btn-default am-btn-xs am-dropdown-toggle"
data-am-dropdown-toggle>
<span class="am-icon-cog"></span> <span
class="am-icon-caret-down"></span>
</button>
<ul class="am-dropdown-content">
<li><a href="#">1. 编辑</a></li>
<li><a href="#">2. 下载</a></li>
<li><a href="#">3. 删除</a></li>
</ul>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<div id="pagination" style="margin-left: 22px;"></div>
</div>

<!-- content end -->
</div>

<%@ include file="/WEB-INF/include/footer.jsp"%>

<%@ include file="/WEB-INF/include/headref.jsp"%>

<script src="assets/js/bootstrap-paginator.js"></script>

<script type="text/javascript">
$(function() {

var options = {
currentPage : '${curPage}',
totalPages : '${pages }',
itemContainerClass : function(type, page, current) {
return (page === current) ? "active" : "pointer-cursor";
},
itemTexts : function(type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "前一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},
onPageClicked : function(e, originalEvent, type, page) {

e.stopImmediatePropagation();
var currentTarget = $(e.currentTarget);
setTableData(page);

currentTarget.bootstrapPaginator("show", page);

}
};

$('#pagination').bootstrapPaginator(options);

function setTableData(page) {
options.currentPage = page;
$("#page").val(page);
$("#selectorForm").submit();
}

$("#searchButten")
.click(
function() {
device_type = document
.getElementById("device_type_selector").value;
register_type = document
.getElementById("register_type_selector").value;
channel_type = document
.getElementById("channel_type_selector").value;
searchKey_1 = document
.getElementById("searchKey").value;
$.ajax({
type : 'post',
dataType : 'html',
data : {
device_type_selector : device_type,
register_type_selector : register_type,
channel_type_selector : channel_type,
searchKey : searchKey_1
},
url : 'service/user/search',
success : function(returnText) {
/* window.parent.CloseMsgBox();
if (returnText.substring(0,1) == "N"){
window.parent.ShowMsgBox(returnText.substring(1));
}
else{
window.parent.ShowMsgBox(returnText);
window.location.href = "service/user/index";
SwitchObjectShow(objName,1);
} */
},
error : function() {/* window.parent.CloseMsgBox();window.parent.ShowMsgBox(ajaxErrorMsg); */
}
});
});
});

</script>
<script type="text/javascript">
function saveSelectIndex(){
var typeId=document.getElementById("register_type_selector");
var typeIdText=typeId.options[typeId.selectedIndex].value;
var osId=document.getElementById("device_type_selector");
var osIdText=osId.options[osId.selectedIndex].value;   //设置多个cookie
var channelId=document.getElementById("channel_type_selector");
var channelIdText=channelId.options[channelId.selectedIndex].value;   //设置多个cookie
document.cookie="typeIdText="+typeIdText;
document.cookie="osIdText="+osIdText;
document.cookie="channelIdText="+channelIdText;
}
function selectIndex(){   //记得初始化，否则会出现undefined
var typeIdText=0;
var osIdText=0;   //获取多个cookie
var channelIdText=0;
var coosStr=document.cookie;//注意此处分隔符是分号加空格
var coos=coosStr.split("; ");
for(var i=0;i<coos.length;i++){
var coo=coos[i].split("=");
//alert(coo[0]+":"+coo[1]);
if("typeIdText"==coo[0]){
typeIdText=coo[1];
}
if("osIdText"==coo[0]){
osIdText=coo[1];
}
if("channelIdText"==coo[0])
{
channelIdText = coo[1];
}
}
var typeId=document.getElementById("register_type_selector");
if(typeIdText==0){
typeId.selectedIndex=0;
}else{
var length=typeId.options.length;
for(var i=0;i<length;i++){
if(typeId.options[i].value==typeIdText){
typeId.selectedIndex=i;
break;
}
}
}
var osId=document.getElementById("device_type_selector");
if(osIdText==0){
osId.selectedIndex=0;
}else{
var length=osId.options.length;
for(var i=0;i<length;i++){
if(osId.options[i].value==osIdText){
osId.selectedIndex=i;
break;
}
}
}

var channelId=document.getElementById("channel_type_selector");
if(channelIdText==0){
channelId.selectedIndex=0;
}else{
var length=channelId.options.length;
for(var i=0;i<length;i++){
if(channelId.options[i].value==channelIdText){
channelId.selectedIndex=i;
break;
}
}
}
}
</script>
</body>
</html>
此中有两个点，一个是基于Bootstrap的分页插件.第二个是使用cookie以及JS来实现，当selector选择后，刷新页面selector自动选择上次选项。
网上找的Demo 写的有点错误。慢慢调试出来修改后的，亲测可用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航