<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
%>
|
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
|
<title>客户端状态查询</title>
|
<link rel="stylesheet" type="text/css" href="css/basic.css">
|
<link rel="stylesheet" type="text/css" href="css/dtManage.css">
|
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
|
<script type="text/javascript" src="js/base.js"></script>
|
<style type="text/css">
|
.b8cfe5{
|
background-color:#b8cfe5;
|
}
|
</style>
|
</head>
|
<body>
|
<!--头部内容开始-->
|
<div id="top">
|
<div id="top_cont">
|
<img src="image/top_img01.jpg" alt="" title="福建福光有限公司" />
|
<!--用户登录后显示用户名鼠标经过显示下拉菜单-->
|
<div id="sign_out">
|
<a href="javascript:void(0);" id="user_name"><span class="triangle"></span></a>
|
<ul>
|
<li><a href="pwdChange.jsp" target="_blank">密码修改</a></li>
|
<li><a href="javascript:exitUser()">安全退出</a></li>
|
</ul>
|
</div>
|
<!--结束-->
|
</div>
|
</div>
|
<!-- 主体内容 -->
|
<div id="main">
|
<!-- 导航内容开始 -->
|
<div id="nav"></div>
|
<!-- 导航内容结束 -->
|
<div id="eleInfor">
|
<div class="checkCon">
|
<table>
|
<tr class="fWeight">
|
<td>设备类型</td>
|
<td>通信类型</td>
|
</tr>
|
<tr>
|
<td>
|
<select name="" id="">
|
<option value="">全部</option>
|
<option value="">FBS9100</option>
|
<option value="">FBS9600</option>
|
</select>
|
</td>
|
<td>
|
<select name="" id="">
|
<option value="">全部</option>
|
<option value="">通信正常</option>
|
<option value="">通信故障</option>
|
</select>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<!-- 表格固定的头部 -->
|
<div id="tb-head"></div>
|
<!-- 表格滚动的内容 -->
|
<div id="tb-body"></div>
|
<!-- 分页内容 -->
|
<div id="paging">
|
<a href="javascript:">导出</a>
|
<span id="current">当前1/4</span>
|
<span>每页<input type="text" id="number"/>条</span>
|
<a href="javascript:" id="set_up">设置</a>
|
<span id="total">数据总量 10</span>
|
<a href="javascript:" id="home">首页</a>
|
<a href="javascript:" id="pre">上一页</a>
|
<a href="javascript:" id="next_p">下一页</a>
|
<a href="javascript:" id="last">尾页</a>
|
<span id="cont">
|
转到<input type="text" id="page_num" />
|
<a href="javascript:" id="go">跳转</a>
|
</span>
|
</div>
|
</div>
|
<!-- 主体内容结束 -->
|
<!--清除浮动-->
|
<div class="clear"></div>
|
</body>
|
<script type="text/javascript" src="js/buildNav.js"></script>
|
<script type="text/javascript" src="js/createTab.js"></script>
|
<script type="text/javascript">
|
var permits;
|
<% Object obj=session.getAttribute("permits");
|
if(obj!=null){
|
String permits =obj.toString(); %>
|
permits=<%=permits%>;
|
//console.info(json);
|
<% } %>
|
|
//定义表格内的的数据
|
var ArrTh=new Array(); //表格头部数据
|
var ArrTd=new Array(); //表格内的数据
|
ArrTh=['用户ID','用户名称','登陆状态','客户端类型','客户端IP','关联电池组ID','关联机房名称','登陆时间','在线时长'];
|
//自定义表格的数据
|
for(var i=0;i<100;i++)
|
{
|
for(var k=0;k<ArrTh.length;k++)
|
{
|
var n=i*ArrTh.length+k;
|
ArrTd[n]=ArrTh[k]+i;
|
}
|
}
|
//初始化页面
|
$(document).ready(function(){
|
setUserName();
|
|
//对页面的高度进行初始化
|
var scrHt=$(window).height(); //获取浏览器可视区域的高度
|
var bodyHt=$('body').height(); //获取body的高度
|
var tbBodyHt=$('#tb-body').height(); //获取表格滚动的高度
|
$('#tb-body').height(tbBodyHt+scrHt-bodyHt); //定义表格的高度
|
//当页面的大小改变是调整页面的高度
|
$(window).resize(function(){
|
var newScrHt=$(this).height(); //获取浏览器可视区域的高度
|
var newBodyHt=$('body').height(); //获取表格滚动的高度
|
var newTbBodyHt=$('#tb-body').height(); //获取表格滚动的高度
|
$('#tb-body').height(newTbBodyHt+newScrHt-newBodyHt); //定义表格的高度
|
});
|
//根据表格头部数据创建表格
|
createTable('tb-head','tbFixed',ArrTh.length,ArrTh,ArrTd);
|
createTable('tb-body','tbScroll',ArrTh.length,ArrTh,ArrTd);
|
var hdWidth=$('#tb-head').width(); //头部的宽度
|
//让表格宽度等于头部宽度-20
|
$('#tb-head table').width(hdWidth-20);
|
$('#tb-body table').width(hdWidth-20);
|
//让表格头部和body左右滚动同步
|
$('#tb-body').scroll(function(){
|
var scrollX=$(this).scrollLeft();
|
$('#tb-head .tbFixed').css('left',-scrollX+'px')
|
});
|
//点击表格的行该行变色
|
$('#tb-body').on('click','table tbody tr',function(){
|
//去除行的class="b8cfe5"
|
$('#tb-body table tbody tr').each(function(){
|
$(this).removeClass('b8cfe5');
|
});
|
// 给点击的上添加class="b8cfe5"
|
$(this).addClass('b8cfe5');
|
});
|
});
|
</script>
|
</html>
|
