WebContent/WEB-INF/jsp/pc/prize/prizeList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>奖品管理</title>
		<link rel="stylesheet" href="/zzhnc/res/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="/zzhnc/res/css/basic.css">
	</head>
	<style>
		.layui-form-select dl {
			max-height: 190px;
		}
		
		#allmap {
			top: 10px;
			width: 100%;
			height: 200px;
			overflow: hidden;
			margin: 0;
		}
	</style>

	<body class="wrap">
		<div class="layui-form">
			<div class="layui-form-item searchbox" style="margin-bottom: 0px;">

				<!-- <div class="layui-input-inline producttype" style="width: 140px;">
					<select name="producttype" >
						<option value="">项目名称</option>
					</select>
				</div>
				<div class="layui-input-inline productid" style="width: 140px;">
					<select name="productid">
						<option value="">海报模板id</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 150px;">
					<input name="date1" class="layui-input" placeholder="更新时间" onclick="layui.laydate({elem: this,format: 'YYYY-MM-DD hh:mm:ss',istime: true})" />
				</div> -->
				<div class="layui-input-inline" style="width: 140px;">
					<input type="text" class="layui-input" name="keyword" placeholder="关键字" />
				</div>
				<button class="layui-btn" lay-submit lay-filter="querybtn">查询</button>
				<button class="layui-btn layui-btn-primary resetBtn">重置</button>
				<a class="layui-btn layui-btn-warm createBtn" href="#"><i class="layui-icon">&#xe61f;</i> 添加项目</a>
			</div>
		</div>

		<table class="layui-table">
			<thead>
				<tr>
					<th style="width: 30px;">No</th>
					<th style="min-width:120px;">项目名称</th>
					<th style="min-width: 80px;">经度</th>
					<th style="min-width: 80px;">纬度</th>
					<th style="min-width: 80px;">海报模板id</th>
					<th style="min-width: 80px;">更新时间</th>
					<th style="min-width: 80px;">操作</th>
				</tr>
			</thead>

			<tbody id="tablelist">
				<!-- 	<tr>
					<td>1</td>
					<td>项目名称</td>
					<td>经度</td>
					<td>纬度</td>
					<td>海报模板id</td>
					<td>更新时间</td>
					<td>
						<a href="#" class="layui-btn layui-btn-mini updataBtn">修改</a>
						<a href="#" class="layui-btn layui-btn-mini deleteBtn">删除</a>
					</td>
				</tr> -->
			</tbody>
		</table>
		<div class="nulldata">暂无数据</div>
		<div id="page"></div>

	</body>
	<form class="layui-form Detailbtn">
		<div class="layui-form-item">
			<label class="layui-form-label">项目名称</label>
			<div class="layui-input-inline" style="width:390px;">
				<input type="text" name="name" lay-verify="required" placeholder="项目名称" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">海报模板id</label>
			<div class="layui-input-inline">
				<select name="postertempletid" lay-verify="required">
					<option value=""></option>
					<option value="0">1</option>
					<option value="1">2</option>
					<option value="2">3</option>
					<option value="3">4</option>
					<option value="4">5</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">位置</label>
			<div class="layui-input-inline">
				<input type="text" name="lng" lay-verify="required" placeholder="经度" class="layui-input">
			</div>
			<div class="layui-input-inline">
				<input type="text" name="lat" lay-verify="required" placeholder="纬度" class="layui-input">
			</div>
			<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=V45f8fZO8HiU1gLflQdrpv81D4gXKGRH"></script>
			<div id="allmap"></div>
		</div>
	</form>
	<script src='/zzhnc/res/js/jquery.min.js'></script>
	<script src="/zzhnc/res/plugins/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="/zzhnc/res/js/me.js"></script>
	<script>
		// 百度地图API功能
		var map = new BMap.Map("allmap");
		map.centerAndZoom("重庆", 12);
		//单击获取点击的经纬度
		map.addEventListener("click", function(e) {
			alert(e.point.lng + "," + e.point.lat);
		});
		layui.use(['form', 'element', 'laydate', 'layer', 'laypage'], function() {
			var form = layui.form(),
				element = layui.element(),
				laydate = layui.laydate,
				layer = layui.layer,
				laypage = layui.laypage;
			var page = 1;
			var keyword = "";
			//查询
			form.on('submit(querybtn)', function(data) {
				var keyword = $("input[name=keyword]").val();
				Initdata(page, keyword)
			});
			$(".resetBtn").on("click", function() {
				$("input[name=keyword]").val("");
				Initdata(page, keyword)
			})
			//初始化数据
			Initdata(page, keyword);

			function Initdata(page, keyword) {

				$.post("/zzhnc/project/getProjectList", {
					page: page,
					keyword: keyword
				}, function(data) {
					data = data.data;
					console.log(data)
					laypage({
						cont: 'page',
						pages: data.totalPages, //总页数
						curr: page,
						skip: true,
						jump: function(obj, first) {
							if(!first) {
								page = obj.curr
								Initdata(page, keyword);
							}

						}
					});
					var str = "";
					if(data.rows.length < 1) {
						$(".nulldata").show();
					} else {
						$(".nulldata").hide();
						for(var i = 0; i < data.rows.length; i++) {
							str += '<tr data-id=' + data.rows[i].id + '>' +
								'<td>' + ((data.page - 1) * data.pageSize + i + 1) + '</td>' +
								'<td style="text-align:left;">' + data.rows[i].name + '</td>' +
								'<td>' + data.rows[i].lng + '</td>' +
								'<td>' + data.rows[i].lat + '</td>' +
								'<td>' + data.rows[i].postertempletid + '</td>' +
								'<td>' + toTime_G(data.rows[i].updatedtime) + '</td>' +
								'<td>' +
								'<a href="#" class="layui-btn layui-btn-mini updataBtn">修改</a>' +
								'<a href="#" class="layui-btn layui-btn-mini deleteBtn">删除</a>' +
								'</td>' +
								'</tr>';
						}
					}

					$("#tablelist").html(str);
					toNull_G();
				})
			}

			//添加项目
			$(document).on("click", ".createBtn", function() {
				if(parent.tab.exists("添加项目") > 0) {
					var tabid = parent.tab.getTabId("添加项目");
					parent.tab.deleteTab(tabid);
				}
				parent.tab.tabAdd({
					href: "/zzhnc/project/projectEdit?id=0",
					icon: "fa-cubes",
					title: "添加项目"
				});
			})
			//修改项目
			$(document).on("click", ".updataBtn", function() {
				var id = $(this).parents("tr").attr("data-id");
				if(parent.tab.exists("修改项目") > 0) {
					var tabid = parent.tab.getTabId("修改项目");
					parent.tab.deleteTab(tabid);
				}
				parent.tab.tabAdd({
					href: "/zzhnc/project/projectEdit?id=" + id,
					icon: "fa-cubes",
					title: "修改项目"
				});
			})
			//删除项目
			$(document).on("click", ".deleteBtn", function() {
				var id = $(this).parents("tr").attr("data-id");
				layer.confirm('您确定要删除该项目吗？', {
					btn: ['确定', '取消'] //按钮
				}, function(index, layero) {
					$.post("/zzhnc/project/deleteProject", {
						id: id
					}, function(data) {
						console.log(data)
						if(data.code == 0) {
							top.layer.msg("删除成功");
							Initdata(1, keyword)
							layer.close(index);
						} else {
							top.layer.msg(data.msg);
						}
					})

				}, function(index, layero) {
					layer.close(index);
				});
			});

		})
	</script>

</html>