<%@ page language="java" import="java.util.*,com.fgkj.dto.*" pageEncoding="utf-8"%>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
%>
|
<%
|
Cookie[] cookies = request.getCookies();//这样便可以获取一个cookie数组
|
String user_logo = "";
|
for(Cookie cookie : cookies){
|
if("user_logo".equals(cookie.getName())) {
|
user_logo = cookie.getValue();
|
}
|
}
|
//System.out.println(user_logo);
|
%>
|
<%@ taglib uri="/struts-tags" prefix="s" %>
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
|
<title>My JSP 'template.jsp' starting page</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">
|
<!--
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
-->
|
<link rel="stylesheet" href="src/css/layui.css">
|
</head>
|
|
<body>
|
<div style="width: 375px;">
|
<div class="layui-collapse" lay-filter="test">
|
<div class="layui-colla-item">
|
<h2 class="layui-colla-title">筛选机房</h2>
|
<div class="layui-colla-content layui-show">
|
<div class="layui-form layui-form-pane" action="" lay-filter="optionsListFilter">
|
<div class="layui-form-item">
|
<label class="layui-form-label">条件选择</label>
|
<div class="layui-input-block">
|
<select name="optionsList" id="optionsList" lay-filter="optionsList"></select>
|
</div>
|
</div>
|
<div id="optionsListContent"></div>
|
<div class="layui-form-footer" style="text-align:right">
|
<button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="startFilter">启动筛选</button>
|
<button class="layui-btn layui-btn-danger layui-btn-sm">取消筛选</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 导入页面模板 -->
|
<jsp:include page="template/index.html" flush="true"/>
|
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
|
<script type="text/javascript" src="src/layui.js"></script>
|
<script>
|
/**
|
* 对象依赖layui.form, layui.laytpl
|
*/
|
var OptionsList = function(form, laytpl) {
|
this.list=[]; // 存储条件选择集合
|
this.form= form; // layui的form
|
this.laytpl = laytpl; // layui的laytpl
|
this.formFilter=""; // 条件列表所在容器form的lay-filter
|
this.select=""; // 条件列表所在容器的lay-filter
|
this.content=""; // 条件详细内容容器所在的DOM
|
this.isInit=false; // 标识是否已经被初始化
|
};
|
OptionsList.prototype={
|
/**
|
* 初始化内容
|
* @param array list 条件集合
|
* @param string formFilter 条件列表所在容器form的lay-filter
|
* @param string select 条件列表所在容器的lay-filter(id)
|
* @param string content 条件详细内容所在的DOM的id
|
*/
|
init: function(list, formFilter, select, content) {
|
|
this.list = list;
|
this.formFilter = formFilter;
|
this.select = select;
|
this.content = content;
|
|
// 生成内容
|
this._onCreateList();
|
|
// 添加绑定事件
|
if(!this.isInit) {
|
this.isInit=true; // 设置已经对容器进行了初始化操作
|
this._onEvent(); // 给生成内容绑定事件
|
}
|
|
},
|
// 根据数据生成列表内容
|
_onCreateList: function() {
|
// 生成条件列表
|
var list = this.list;
|
var select = $("#"+this.select);
|
// 清空select
|
select.text("");
|
// 遍历list集合生成下拉内容
|
for(var i=0; i<list.length; i++) {
|
var _list = list[i];
|
var option = $("<option></option>");
|
option.val(_list.value);
|
option.text(_list.text);
|
option.data("data", _list);
|
select.append(option);
|
}
|
// 使用layui进行渲染
|
this.form.render("select", this.formFilter);
|
this._onCreateContent(list[0]);
|
},
|
// 根据数据详细信息
|
_onCreateContent: function(data) {
|
var _this = this;
|
var laytpl = this.laytpl;
|
var form = this.form;
|
var contentId = this.content;
|
// 更具选中的筛选条件生成内容
|
var tpl = $('#'+data.id).html();
|
if(tpl) {
|
// console.log(tpl);
|
laytpl(tpl).render({}, function(html) {
|
$("#"+contentId).html(html);
|
form.render("select", data.filter);
|
});
|
}else {
|
$("#"+contentId).html("");
|
console.log("没有找到#"+data.id+"模板");
|
}
|
},
|
// 添加绑定事件
|
_onEvent: function() {
|
var _this = this;
|
var laytpl = this.laytpl;
|
var form = this.form;
|
var contentId = this.content;
|
// 给条件列表下拉框添加事件
|
this.form.on("select("+this.select+")", function(data) {
|
var content = _this.content;
|
var ele = $(data.elem);
|
var data = ele.find("option:selected").data("data");
|
_this._onCreateContent(data);
|
});
|
}
|
};
|
|
// 引入layui模块
|
layui.use(["element", "form", "laytpl"], function() {
|
// 导入模块
|
var form = layui.form; // 导入form模块
|
var element = layui.element; // 导入element模块
|
var laytpl = layui.laytpl; // 导入laytpl
|
|
var list=[
|
{
|
id: "monVol",
|
filter: "monVolSelFilter",
|
text: "标称单体电压",
|
value:1
|
},
|
{
|
id: "groupNum",
|
filter: "groupNumSelFilter",
|
text: "BTS设备电池组数",
|
value: 2
|
},
|
{
|
id: "loadCurr",
|
filter: "loadCurrFilter",
|
text: "实际负载电流",
|
value: 3
|
},
|
{
|
id: "actCap",
|
filter: "actCapFilter",
|
text: "电池组实际容量",
|
value: 4
|
},
|
{
|
id: "actCapBehind",
|
filter: "actCapBehindFilter",
|
text: "单体实际容量落后数量",
|
value: 5
|
},
|
{
|
id: "eleWarnType",
|
filter: "eleWarnTypeFilter",
|
text: "电池实时告警",
|
value: 6
|
},
|
{
|
id: "equipWarnType",
|
filter: "equipWarnTypeFilter",
|
text: "设备实时告警",
|
value: 7
|
},
|
{
|
id: "powerCutRecord",
|
filter: "powerCutRecordFilter",
|
text: "有停电记录",
|
value: 10
|
},
|
{
|
id: "dropRecord",
|
filter: "dropRecordFilter",
|
text: "有掉站记录",
|
value: 11
|
},
|
{
|
id: "eleChangeRecord",
|
filter: "eleChangeRecordFilter",
|
text: "电池更换记录",
|
value: 12
|
},
|
];
|
|
var optionsList = new OptionsList(form, laytpl);
|
optionsList.init(list, "optionsListFilter", "optionsList", "optionsListContent");
|
|
//监听提交
|
form.on('submit(startFilter)', function(data){
|
console.log(data.field);
|
return false;
|
});
|
});
|
</script>
|
</body>
|
</html>
|
