html手写分页,表格，手写table

彦菘
已于 2024-06-03 21:18:05 修改
阅读量320
点赞数
分类专栏： HTML分页文章标签： java html5
于 2023-08-01 21:06:05 首次发布
本文链接：https://blog.youkuaiyun.com/qq_22905801/article/details/132050848
版权
HTML分页专栏收录该内容
1 篇文章
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>试验任务管理系统</title>
	<link href="/static/checkcenterboard/css/base.css" rel="stylesheet" type="text/css"/>
	<link href="/static/scripts/lib/dtsel/dtsel.css" rel="stylesheet" type="text/css"/>
	<g:render template="/common/js_css" />
	</head>

	<style>
	.column {
		width: 100%;
	}
	.pancel {
		height: 100%;
		margin-bottom: 0;
		/*background: url(images/border2.png) no-repeat;*/
		background-size: 100% 100%;
	}
	.echart {
		height: calc(100% - 0.6rem);
	}
	.table {
		height: 100%;
		overflow: hidden;
		overflow-y: auto;
	}
	.ellipsis {
		max-width: 13em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/** 页码 **/
	.pagination {
		width: 100%;
		text-align: center;
		padding: 20px 0 0;
	}
	.pagination  {
		display: inline-block;
	}
	.pagination :after {
		content: "";
		display: block;
		height: 0;
		clear: both;
		overflow: hidden;
		visibility: hidden;
	}
	.pagination  a {
		float: left;
		margin: 0 10px;
	}
	.pagination  a {
		display: block;
		color: #fff;
		border-radius: 3px;
		background: #0058b7;
		line-height: 40px;
		padding: 0 15px;
		font-size: 17px;
		cursor: pointer;
	}
	.pagination  a:hover {
		color: #ffeb3b;
		font-weight: bold;
	}
	.pagination-select {
		display: inline-block;
		padding: 4px 8px;
		margin: 0 4px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #ccc;
		color: #333;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
		cursor: pointer;
		transition: background-color 0.3s, border-color 0.3s, color 0.3s;
	/*.pagination-select {*/
		background-color: #ccc; /* 将此处的blue替换为与页码颜色相同的颜色值 */
		margin-left: 10px; /* 可以根据需要自行调整与label元素的距离 */
	/*}*/
	}

	/*.pagination-container {*/
	/*	display: inline-block;*/
	/*	margin-right: 10px; !* 可以根据需要自行调整与select元素的距离 *!*/
	/*}*/

	/*.select-container {*/
	/*	display: inline-flex;*/
	/*	align-items: center;*/
	/*	margin-right: 10px; !* 可以根据需要自行调整与分页的距离 *!*/
	/*	margin-top: 10px; !* 可以根据需要自行调整与分页的距离 *!*/
	/*}*/
	/*.container {*/
	/*	display: flex;*/
	/*	justify-content: center;*/
	/*	align-items: center;*/
	/*}*/


	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pagination-container {
		display: flex;
		justify-content: center;
		margin-bottom: 10px; /* 可以根据需要自行调整分页和其他元素之间的距离 */
	}

	.label-container,
	.select-container {
		display: flex;
		justify-content: center;
	}

	/*.pagination-select {*/
	/*	background-color: blue; !* 将此处的 blue 替换为与分页颜色相同的颜色值 *!*/
	/*	margin-left: 10px; !* 可以根据需要自行调整 label 和 select 之间的距离 *!*/
	/*}*/

	.pagination-select:focus {
		outline: none;
		border-color: #08c;
	}

	.pagination-select:hover {
		background-color: #f5f5f5;
	}

	.pagination-select option {
		color: #333;
	}



	/*.pagination a {*/
	/*	color: black;*/
	/*	float: left;*/
	/*	padding: 8px 16px;*/
	/*	text-decoration: none;*/
	/*	transition: background-color .3s;*/
	/*	border: 1px solid #ddd;*/
	/*	font-size: 18px; !* 设置字体大小 *!*/
	/*}*/

	.pagination a.active {
		background-color: #ffeb3b;
		color: white;
		border: 1px solid #ffeb3b;
		font-weight: bold;
	}

	.pagination a:hover:not(.active) {background-color: #ddd;}
	</style>
</head>
%{--<script type="text/javascript" src="/static/scripts/jquery/jquery-1.8.3.min.js"></script>--}%
%{--<script src="/static/scripts/bootstrap/bootstrap.min.js"></script>--}%
<!--<link href="css/animate.css" rel="stylesheet" type="text/css"/>-->
<!-- 全局js -->
<script type="text/javascript" src="/static/checkcenterboard/js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="/static/scripts/plugins/datetime/moment.min.js"></script>
<body class="dp">
<div class="header-box">
%{--	<div class="header-box-bd">--}%
%{--		<img src="images/logo.png" />--}%
%{--		<h4>环境试验管理系统</h4>--}%
%{--	</div>--}%
%{--	<ul class="header-ul">--}%
%{--		<li class="header-li1">--}%
%{--			<a href="/checkcenterboard/index.html">首页</a>--}%
%{--		</li>--}%
%{--		<li class="header-li2">--}%
%{--			<a href="/checkcenterboard/task.html">任务</a>--}%
%{--		</li>--}%
%{--		<li class="header-li3">--}%
%{--			<a href="/checkcenterboard/device.html">设备</a>--}%
%{--		</li>--}%
%{--		<li class="header-li4 header-act">--}%
%{--			<a href="/checkcenterboard/user.html">人员</a>--}%
%{--		</li>--}%
%{--	</ul>--}%
	<div class="column">
		<div class="pancel">
			<div class="echart" style="margin-top: 15px">
				<div class="search">
					<form id="queryForm" class="queryForm" >
%{--						<div class="search_row">--}%
						<div class="this_select_style">
							<div class="msg selectmenuMsg">
								<label>消息：</label>
								<input type="text" readonly="true" id="msgLId" name="msgL"  class="selectmenuMsg" data-value="-1" value="请选择"  >
								<ul id="msgui" style="display: none;">
									%{--							<li data-value="0">请选择</li>--}%
									<li data-value="消息队列请求同步TestTask信息" data-name="消息队列">消息队列请求同步TestTask信息</li>
									<li data-value="消息队列请求同步Pbom信息" data-name="消息队列">消息队列请求同步Pbom信息</li>
									<li data-value="消息队列请求同步FullPbom信息" data-name="消息队列">消息队列请求同步FullPbom信息</li>
									<li data-value="试验结论数据回传" data-name="消息队列">消息队列试验结论数据回传</li>
									<li data-value="消息队列接收任务结论数据反馈" data-name="消息队列">消息队列接收任务结论数据反馈</li>
									<li data-value="主站请求同步部门信息" data-name="主站">主站请求同步部门信息</li>

									<li data-value="主站请求同步型号信息" data-name="主站">主站请求同步型号信息</li>
									<li data-value="主站请求同步BOM信息" data-name="主站">主站请求同步BOM信息</li>
									<li data-value="主站请求同步项目信息" data-name="主站">主站请求同步项目信息</li>
									<li data-value="主站请求同步任务信息" data-name="主站">主站请求同步任务信息</li>
									<li data-value="主站请求同步设备信息" data-name="主站">主站请求同步设备信息</li>
									<li data-value="维护主站项目信息" data-name="主站">维护主站项目信息</li>
									<li data-value="维护主站任务信息" data-name="主站">维护主站任务信息</li>
								</ul>
							</div>
						</div>

%{--						</div>--}%
						<div class="this_select_style">
							<div class="result selectmenu">
								<label>结果：</label>
								<input type="text" readonly="true" class="selectmenu" data-value="-1" value="请选择"  id="successId" name="success" >
								<ul  style="display: none;">
									<li data-value="0">成功</li>
									<li data-value="1">失败</li>
								</ul>
							</div>

						</div>
						<div class="search_row">
							<label>产品编号：</label>
							<input type="text" id="cpCodeId" name="cpCodeL">
						</div>
						<div class="search_row">
							<label>产品名称：</label>
							<input type="text" id="cpNameId" name="cpNameL">
						</div>
						<div class="search_row">
							<label>工序号：</label>
							<input type="text" id="gongXId" name="gongXL">
						</div>
						<div class="search_row">
							<label>部门：</label>
							<input type="text" id="depNameId" name="depNameL">
						</div>
						<div class="search_row">
							<label>批次：</label>
							<input type="text" id="batchId" name="batchL">
						</div>
						<div class="search_row">
							<label>时间：</label>
							<input type="text" id="startDateId" name="startDateL" >
						</div>
						<div>至</div>
						<div class="search_row">
							<label>时间：</label>
							<input type="text" id="endDateId"  name="endDateIdDateL" >
						</div>

						<button type="button" id="searchBtn">搜索</button>
						<button type="button" id="clearBtn">清空</button>
						<button id="lr-edit" type="button" >查看</button>
					</form>

				</div>

				<div class="toolbar" style="float: right;">
					<div class="btn-group">
						<a id="lr-replace" class="btn btn-default" onclick="refresh();" authorize="yes"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
%{--						<button id="lr-edit" type="button" >查看</button>--}%

						<a id="lr-delete" class="btn btn-default" onclick="del()" authorize="yes"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
					</div>
				</div>
			</div>
		</div>
	</div>


</div>
<div class="mains " style="top: 120px">
	<div class="main1">
%{--		<div class="titles1">--}%
%{--			进行中的任务--}%
%{--		</div>--}%
		<div class="main1-bd">
			<table class="dataintable" id="userTable">
				<thead>
				<tr>
					<th style="width:5%;"></th>
					<th style="width:10%;">时间</th>
					<th style="width:13%;">消息</th>
					<th style="width:5%;">错误信息</th>
					<th style="width:6%;">型号</th>
					<th style="width:11%;">状态</th>
					<th style="width:11%;">产品名称</th>
					<th style="width:5%;">产品编号</th>
					<th style="width:8%;">工序</th>
					<th style="width:8%;">部门</th>
					<th style="width:8%;">批次号</th>
					<th style="width:8%;">操作</th>
				</tr>
				</thead>
				<tbody></tbody>
			</table>
		<div class="container">
			<div class="pagination-container">
				<!-- 这里放分页的代码 -->
				<div class="pagination"></div>
			</div>

			<div class="select-container" style="display: none">
				<!-- 添加一个下拉菜单或输入框，供用户选择每页显示的数据条数 -->
				<label for="itemsPerPage" style="color: white;">每页显示：</label>
				<select id="itemsPerPage" class="pagination-select" onchange="updatePagination()">
					<option value="5">5条</option>
					<option value="10" selected>10条</option>
					<option value="20">20条</option>
				</select>
			</div>
		</div>

%{--		<select id="itemsPerPage" class="pagination-select pagination-select-container" onchange="updatePagination()">--}%
%{--			<option value="5">5条</option>--}%
%{--			<option value="10" selected>10条</option>--}%
%{--			<option value="20">20条</option>--}%
%{--		</select>--}%
%{--		<div class="pagination">--}%
%{--			<ul>--}%
%{--				<li><a>首页</a></li>--}%
%{--				<li><a>1</a></li>--}%
%{--				<li><a>2</a></li>--}%
%{--				<li><a>3</a></li>--}%
%{--				<li><a>4</a></li>--}%
%{--				<li><a>5</a></li>--}%
%{--				<li><a>6</a></li>--}%
%{--				<li><a>上一页</a></li>--}%
%{--				<li><a>下一页</a></li>--}%
%{--				<li><a>尾页</a></li>--}%
%{--			</ul>--}%
%{--		</div>--}%
		</div>
	</div>
	<div id="addWindow" style="width:1200px;">
		<form id="addForm" class="addForm" method="post" >
			<div style="margin-bottom:10px">

				<div class="search_row">
					<label>消息：</label>
					<input name="msg"  id="msgFormId"  type="text"  style="width: 50%;" />
				</div>
				<div class="search_row">
					<label>状态：</label>
					<input name="success"  id="successFormId"   type="text" style="width: 33%;" />
				</div>



			</div>
			<div style="margin-bottom:10px">
				%{--            <input name="date"  id="dateFormId" data-options="label:'时间',prompt:'时间'"  type="text" class="easyui-textbox  " style="width: 33%;" />--}%
				<input name="date"  id="dateFormId" data-options="formatter:formatDate,prompt:'时间'"   type="text" class="easyui-datetimebox"  style="width: 33%;" />
			</div>
			<div style="margin-bottom:10px">
				<input name="params" type="text" class="easyui-textbox" data-options="label:'请求参数',prompt:'请求参数', multiline: true" id="paramsFormId" style="width: 66%;height: 200px;" />
			</div>
			<div style="margin-bottom:10px">
				<input name="result" type="text" class="easyui-textbox" data-options="label:'返回结果',prompt:'返回结果', multiline: true" id="resultFormId" style="width: 66%;height: 200px;" />
			</div>
			<div style="margin-bottom:10px">
				<input name="emsg" type="text" class="easyui-textbox" data-options="label:'异常内容',prompt:'异常内容'" id="emsgFormId" style="width: 90%;" />
			</div>
			<div style="margin-bottom:10px">
				<input name="errorMessage" type="text" class="easyui-textbox" data-options="label:'报错信息',prompt:'报错信息'" id="errorMessageId" style="width: 90%;" />
			</div>
			<div style="margin-bottom:10px">
				<input name="estacktrace" type="text" class="easyui-textbox" data-options="label:'异常堆栈',prompt:'异常堆栈', multiline: true" id="estacktraceFormId" style="width: 90%;height: 200px;" />
			</div>
		</form>
	</div>
</div>

<script type="text/javascript" src="/static/checkcenterboard/data/data.js"></script>
<script type="text/javascript" src="/static/scripts/plugins/datetime/moment.min.js"></script>
<script type="text/javascript" src="/static/online/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/static/scripts/lib/dtsel/dtsel.js"></script>
<script type="text/javascript">
	var currentPage = 1; // 当前页
	var id  //当前选择行
	var itemsPerPage  = 20; // 每页条数
	var totalItemCount = 50; // 总数据条数
	var itemsPerPageSelect = document.getElementById('itemsPerPage');
	var paginationDiv = document.querySelector('.pagination');

	function updatePagination() {
		itemsPerPage = parseInt(itemsPerPageSelect.value); // 获取用户选择的每页显示的数据条数
		var totalPageCount = Math.ceil(totalItemCount / itemsPerPage); // 计算总页数

		// paginationDiv.innerHTML = ''; // 清空原有的分页链接

		// 前后显示的页码数量
		var showPageCount = 6;
// 计算起始页码和结束页码
		var startPage = Math.max(1, currentPage - showPageCount);
		var endPage = Math.min(totalPageCount, currentPage + showPageCount);

		if (currentPage > endPage - showPageCount + 1) {
			startPage = Math.max(1, endPage - showPageCount + 1);
		} else {
			startPage = Math.max(1, currentPage - Math.floor(showPageCount / 2));
		}
		endPage = Math.min(totalPageCount, startPage + showPageCount - 1);

		paginationDiv.innerHTML = ''; // 清空导航

		// 添加首页链接
		var firstPageLink = document.createElement('a');
		firstPageLink.href = 'javascript:void(0)';
		firstPageLink.addEventListener('click', function() {
			currentPage = 1;
			showData();
		});
		firstPageLink.textContent = '首页';
		paginationDiv.appendChild(firstPageLink);

		// 添加上一页链接
		var prevPageLink = document.createElement('a');
		prevPageLink.href = 'javascript:void(0)';
		prevPageLink.addEventListener('click', function() {
			if (currentPage > 1) {
				currentPage--;
				showData();
			}
		});
		prevPageLink.textContent = '上一页';
		paginationDiv.appendChild(prevPageLink);
		for (var i = startPage; i <= endPage; i++) {
			(function(pageNumber) {
				var pageLink = document.createElement('a');
				pageLink.href = 'javascript:void(0)';
				pageLink.addEventListener('click', function() {
					currentPage = pageNumber;
					showData();
				});
				if (pageNumber === currentPage) {
					pageLink.classList.add('active');
				}
				pageLink.textContent = pageNumber;
				paginationDiv.appendChild(pageLink);
			})(i);
		}
		// 添加下一页链接
		var nextPageLink = document.createElement('a');
		nextPageLink.href = 'javascript:void(0)';
		nextPageLink.addEventListener('click', function() {
			if (currentPage < totalPageCount) {
				currentPage++;
				showData();
			}
		});
		nextPageLink.textContent = '下一页';
		paginationDiv.appendChild(nextPageLink);

		// 添加尾页链接
		var lastPageLink = document.createElement('a');
		lastPageLink.href = 'javascript:void(0)';
		lastPageLink.addEventListener('click', function() {
			currentPage = totalPageCount;
			showData();
		});
		lastPageLink.textContent = '尾页';
		paginationDiv.appendChild(lastPageLink);
	}
	// function updatePagination() {
	// 	itemsPerPage = parseInt(itemsPerPageSelect.value); // 获取用户选择的每页显示的数据条数
	// 	var totalPageCount = Math.ceil(totalItemCount / itemsPerPage); // 计算总页数
	//
	// 	paginationDiv.innerHTML = ''; // 清空原有的分页链接
	//
	// 	for (var i = 1; i <= totalPageCount; i++) {
	// 		(function(page) {
	// 			var pageLink = document.createElement('a');
	// 			// pageLink.href = 'javascript:void(0)';
	// 			pageLink.addEventListener('click', function() {
	// 				currentPage = page;
	// 				showData();
	// 			});
	// 			if (i === 1) {
	// 				pageLink.classList.add('active');
	// 			}
	// 			paginationDiv.appendChild(pageLink);
	// 		})(i);
	// 	}
	//
	// }

	// 查询数据的函数
	function queryData(pageSize) {
		// 根据pageSize查询数据的逻辑
		// ...
		itemsPerPage = pageSize
		showData()
	}

	document.addEventListener("DOMContentLoaded", function() {
		// 获取select元素
		var selectElement = document.getElementById("itemsPerPage");

		// 监听select元素的change事件
		selectElement.addEventListener("change", function() {
			// 获取选择的每页条数
			var pageSize = selectElement.value;

			// 根据选择的每页条数重新查询数据
			queryData(pageSize);
		});

		// 其他逻辑...
	});



	function search(){
		showData()
		// datagrid.datagrid('load', $("#queryForm").serializeForm());
		// 监听表单提交事件
		// $("#queryForm").submit(function(event) {
		// 	// 阻止表单的默认提交行为
		// 	event.preventDefault();
		//
		// 	// 获取表单数据
		// 	var formData = $(this).serialize();
		//
		// 	// 发送AJAX请求
		// 	$.ajax({
		// 		url: "后端接口的URL",
		// 		type: "POST",
		// 		data: formData,
		// 		success: function(response) {
		// 			// 请求成功时的处理逻辑
		// 			console.log(response);
		// 		},
		// 		error: function(xhr, status, error) {
		// 			// 请求失败时的处理逻辑
		// 			console.log(error);
		// 		}
		// 	});
		// });
	}
	function clear(){
		$("#queryForm").form("clear");
		// datagrid.datagrid('load', $("#queryForm").serializeForm());
		showData()
	}
	$(function(){
		$('#addWindow').dialog({
			cls:'dialog',
			title : '同步详情',
			closed: true,
			modal: true,
			maximized: true,
			onResize:function(){
				$(this).dialog('center');
			},
			buttons: [{
				text:'关闭',
				handler:function(){
					$('#addWindow').dialog('close');
				}
			}]
		});
		var instanceStar =new dtsel.DTS('#startDateId',{direction:'BOTTOM'
		});
		var instanceEnd =new dtsel.DTS('#endDateId',{direction:'BOTTOM'
		});
		$('#searchBtn').click(function() {
			var cpCodeLValue = $('input[name="cpCodeL"]').val();
			console.log(cpCodeLValue);
			search()
			// 在这里添加你要执行的逻辑代码
		});
		$('#clearBtn').click(function() {
			clear()
			// 在这里添加你要执行的逻辑代码
		});
		$('#lr-edit').click(function() {
			edit()
			// 在这里添加你要执行的逻辑代码
		});
		showData()
	});
	function clearTablePromise() {
		return new Promise(function(resolve) {
			$("#userTable tbody").empty();
			resolve();
		});
	}
	function showData (){
		// var cpCodeLValue = $('input[name="cpCodeL"]').text();
		// 加载人员数据
		$.post("/datagrid", {
			// _username: username,
			// _password: password,
			cpCodeL: $('input[name="cpCodeL"]').val(),
			// data:$("#queryForm").serialize(),
			pagination : true,
			rows: itemsPerPage,
			page: currentPage,
			fit:true,
			fitColumns:true,
			singleSelect: false,
			border:false,
		}, function(rst){
			clearTablePromise().then(function() {
				$("#userTable tbody").empty();
				totalItemCount= rst.total
				for (var i in rst.rows) {
					var row = rst.rows[i];
					var html = '<tr>\
						<td ><input type="radio" name="option" onclick="handleSelection(event, \'' + row.id + '\')"></td>\
						<td>'+(dateFormatMD(row.date,true) || "")+'</td>\
						<td>'+(row.msg || "")+'</td>\
						<td  class="ellipsis">'+(row.errorMessage || "")+'</td>\
                        <td>'+(row.model || "")+'</td>\
                        <td>'+(row.success || "")+'</td>\
                        <td>'+(row.cpName || "")+'</td>\
                        <td><span class="orange">'+(row.cpCode || "")+'</span></td>\
                        <td>'+(row.gongXh || "")+'</td>\
                        <td>'+(row.departmentName || "")+'</td>\
                        <td>'+(row.batchCode || "")+'</td>\
						<td style="color: white;"><a href="#" style="color: white;" onclick="downloadFile('+row.id+')">下载</a></td>\
				</tr>';
				$("#userTable").find('tbody').append(html);
				}
				// 初始化分页
				updatePagination();

				// var totalItemCount = 50; // 总数据条数
				// var itemsPerPage = 10;  // 每页显示的数据条数
				// var totalPageCount = Math.ceil(totalItemCount / itemsPerPage); // 计算总页数
				//
				// var paginationDiv = document.querySelector('.pagination');
				//
				// for (var i = 1; i <= totalPageCount; i++) {
				// 	var pageLink = document.createElement('a');
				// 	pageLink.href = '#';
				// 	pageLink.innerText = i;
				// 	paginationDiv.appendChild(pageLink);
				// }






			});
		});

	}
	function handleSelection(event, rowId) {
		console.log("Selected row ID: " + rowId);
		id = rowId
		// 在这里执行对选中行的其他操作，使用rowId变量
	}
	function dateFormatMD(date, useCn ){
		date = date.toString()
		if(!date) date = moment().toDate();
		var pattern = useCn? "YYYY-MM-DD HH:mm:ss": "M-D";
		if(typeof date =="string"){
			return moment(date,"YYYY-MM-DD HH:mm:ss").format(pattern);
		}else{
			return moment(date).format(pattern);
		}
	}
	function dateFormatMDHm(date, useCn ){
		if(!date) date = moment().toDate();
		var pattern = useCn? "MM月DD日 HH时mm分": "MM-DD HH:mm";
		if(typeof date =="string"){
			return moment(date,"YYYY-MM-DD HH:mm:ss").format(pattern);
		}else{
			return moment(date).format(pattern);
		}
	}
	function downloadFile(id){
		window.location.href='/downloadFile?id='+id;
	}
	function edit() {
		var form = $("#addForm");
		// form.form("clear");
		$.ajax({
			url: "/show",
			data: { id: id },
			dataType: "json",
			success: function (response) {
				// form.form("load", response.obj);

				$('#msgFormId').text(response.obj.msg)
				$('#successFormId').text(response.obj.success);
				$('#dateFormId').text(response.obj.date)
				$('#paramsFormId').text(response.obj.params)
				$('#resultFormId').text(response.obj.result)
				$('#emsgFormId').text(response.obj.emsg)
				$('#errorMessageId').text(response.obj.errorMessage)
				$('#estacktraceFormId').text(response.obj.estacktrace)

				$('#addWindow').dialog('open');
			}
		});
	}
	function formatDate(date){
		var y = date.getFullYear();
		var m = date.getMonth()+1;
		var d = date.getDate();
		var h = date.getHours();
		var min = date.getMinutes();
		var sec = date.getSeconds();
		return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+' '+(h<10?('0'+h):h)+':'+(min<10?('0'+min):min)+':'+(sec<10?('0'+sec):sec);
	}
</script>
<script>
	/*结果*/
	$('body').on('click', '.result .this_select_style .selectmenu', function () {
		$this = $(this);
		$this.toggleClass("show_ul");
		$this.next().toggle();
	});
	$('body').on('click', '.result .this_select_style li', function () {
		$this = $(this);
		var  tex = $this.context.outerText;
		var thisInput = $this.parent().siblings("input");
		thisInput.attr("data-value", $this.attr("data-value")).val($this.text()).toggleClass("show_ul");
		$this.parent().hide();
		$('#mask').hide();
	});
	$('.selectmenu').on('click', function (e) {
		if(!$(e.target).hasClass('selectmenu'))
		{
			$('#mask').hide();
			$('.result .this_select_style .selectmenu').removeClass("show_ul");
			$('.result .this_select_style ul').hide();
		}
	});
	/*消息*/
	$('body').on('click', '.msg .this_select_style .selectmenuMsg', function () {
		$this = $(this);
		$this.toggleClass("show_ul");
		$this.next().toggle();
	});
	$('body').on('click', '.msg .this_select_style li', function () {
		$this = $(this);
		var  tex = $this.context.outerText;
		var thisInput = $this.parent().siblings("input");
		thisInput.attr("data-value", $this.attr("data-value")).val($this.text()).toggleClass("show_ul");
		$this.parent().hide();
		$('#mask').hide();
	});
	$('body').on('click','.msgui', function (e) {
		if(!$(e.target).hasClass('selectmenuMsg'))
		{
			$('#mask').hide();
			$('.msg .this_select_style .selectmenuMsg').removeClass("show_ul");
			$('.msg .this_select_style ul').hide();
		}
	});
</script>
</body>
</html>