<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>系统操作日志管理</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- 加载公共的样式，主要作用是清除浏览器的一些默认样式，页面公共排版，包括头部以及一些组件样式   -->
<link type="text/css" rel="stylesheet" href="${ctx}/css/base.css" />
<link type="text/css" rel="stylesheet" href="${ctx}/css/index.css" />
<!-- 前端框架核心库加载放在 -->
<script src="${ctx}/js/lib/core.js" type="text/javascript"></script>
<script src="${ctx}/js/component/modal.js" type="text/javascript"></script>
<!-- 树形控件 -->
<script src="${ctx}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<!-- 使用下拉框引入 -->
<%@ include file="/include/taglib.jsp"%>
<!-- 模块化框架配置 -->
<script type="text/javascript">
    // seajs 的简单配置
    seajs.config({
        base: "${ctx}/js",
        alias: {

        }
    });
</script>
<script type="text/javascript" src="${ctx}/js/index.js"></script>
</head>
<body>
	<div class="main">
  		<div class="b_box">
        <div class="p_bar">您当前的位置：日志管理/登录日志</div>
			<form id="sysLoginLogForm" action="post">
				<input type="hidden" id="page" name="page" value="1"/>
				<table class="c_table m_t10">
					<tr>
						<td align="center">
							登录人:
							<input class="input_txt" style="width: 120px;" type="text" id="username" name="username" value="${sysLoginLog.username}" readonly="readonly"/>
						</td>
						<td align="left">
							登录时间:
							
							<input name="beginLoginTime" id="beginLoginTime" class="date_txt"  readonly="readonly" onfocus="WdatePicker({isShowWeek:true})" style="width:120px"/>
							&nbsp;/&nbsp;
							<input name="endLoginTime" id="endLoginTime" class="date_txt"  readonly="readonly" onfocus="WdatePicker({isShowWeek:true})" class="input_txt" style="width:120px"/>
						</td>
						<td align="left">
							<input type="button" value="查询" id="searchBtn" class="a_btn"/>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<table id="tbwrap" class="table_list"></table>
		<div class="page eui-pager-custom" id="j_pager"></div>
	</div>
	
	<script type="text/html" id="tb_template">
	    <thead>
			<tr>
				<th>登陆人</th>
				<th>登录时间</th>
			</tr>
		</thead>
		<tbody data-type="body" id="queryTable">
    		<!if(list.length>0) { !>
        		<!for(var i=0,len=list.length;i<len;i++){
            		var item = list[i],classItem = (i%2!=0)?"odd td_odd":"even";
          		!>
		    	<tr class="gradeA <!=classItem!>">
			    	<td><!=item["username"]!></td>
			    	<td><!=item["loginTime"]!></td>
		   		</tr>
        	<!}!>
    		<!}else{!>
				<tr>
		    		<td colspan="10"> 暂无数据</td>
				</tr>
    		<!}!>
 		</tbody>
	</script>

	<script type="text/javascript">
		var sysLoginLogDetailListDialog;
		$(function(){
			// 2、查询
			$("#searchBtn").click(function () {
				search();
	        });
		});
	
	</script>
	
	<script type="text/javascript">
		$(function () {
	        search();
	    });
		
		function search() {
	        seajs.use(["component/table"], function (uiTable) {
	        	$("#page").val(1);
				var serializedForm = $("#sysLoginLogForm").serialize();
		        $.post("${ctx}/sysLoginLog/detailListAjaxPage.do", serializedForm, 
		        function (result) {
		        	// alert("status="+result.status+", currentPage="+result.currentPage+", pageCount="+result.pageCount+", rowCount="+result.rowCount);
	            	var table = new uiTable({
	                	"con": "#tbwrap",
	                    "data": {
	                         "list": result.dataList
	                    },
	                    "template": "tb_template",
	                    "pager": {
	                    	"con": "#j_pager",
	                        "data": {
	                        	"currentPage": result.currentPage,
	                            "pageCount": result.pageCount,
	                            "rowCount": result.rowCount
	                        },
	                        template: '<a title="首页" class="page_first" data-role="first" href="#"></a><a title="上一页" class="page_prev" href="#" data-role="prev"></a><div data-value="pageNum"></div><a title="下一页" class="page_next" href="#" data-role="next"></a><a title="尾页" class="page_last" href="#" data-role="last"></a> 共<span data-target="rowCount"></span>条 跳转到 <input type="text" data-target="input" class="page_input"/><a href="#" data-role="go" class="go">GO</a>'
	                    }
	                });

	                table.getPager().bind("changePage", function (event, page, hander) {
	                	$("#page").val(page);
	                	var serializedForm = $("#sysLoginLogForm").serialize();
	                	$.post("${ctx}/sysLoginLog/detailListAjaxPage.do",serializedForm,
	                    function (result) {
	                    	table.render({ "list": result.dataList });
	                    	fullRows("queryTable");
		                    hander({"currentPage": result.currentPage, "pageCount": result.pageCount, "rowCount": result.rowCount });
	                 	}, "json");
	                });  fullRows("queryTable");
	        	}, "json");
	      	});
		}

		//补齐表格
		function fullRows(id){
            var len=$("#"+id).find("tr").length;
            for(var i=10;i>len;i--){ 
            	$("<tr><td></td><td></td></tr>").appendTo($("#"+id));  
            }
		}
	</script>

</body>
</html>
