WebContent/WEB-INF/jsp/pc/article/articleIndex.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;font-family:"微软雅黑";}
	</style>
	<body class="wrap">
		<div class="layui-form">
			<div class="layui-form-item searchbox" style="margin-bottom: 0px;">
				<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: 120px;">图片链接</th>
					<th style="min-width: 80px;">更新时间</th>
					<th style="min-width: 80px;">操作</th>
				</tr>
			</thead>
				
			<tbody id="tablelist">
			</tbody>
		</table>
		<div class="nulldata">暂无数据</div>
		<div id="page"></div>
		
	</body>

	<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>
		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 queryObj={
					page : 1,
					pagesize:10,
					keyword:''
				};
				
				initdata(queryObj);
				
				
				
				//查询
				 form.on('submit(querybtn)', function(data){
				      	queryObj.keyword=$("[name=keyword]").val();
						queryObj.page=1;
						initdata(queryObj)
				  });
				$(".resetBtn").on("click",function(){
					$("[name=keyword]").val("")
					queryObj={
							page : 1,
							pagesize:10,
							keyword : ""
					};
					initdata(queryObj)
					return false
				})
			//初始化数据
			initdata(queryObj);
			function initdata(queryObj){
				
				$.post("/zzhnc/article/getArticlesList",queryObj,function(data){
					data=data.data;
					console.log(data)
					laypage({
						cont: 'page',
						pages: data.totalPages, //总页数
						curr: queryObj.page,
						skip: true,
						jump: function(obj, first) {
							if(!first) {
								queryObj.page = obj.curr
								initdata(queryObj);
							}

						}
					});
					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].title+'</td>'
								+'<td>'+ data.rows[i].imgurl+'</td>'
								+'<td>'+ toTime_G(data.rows[i].createdtime) +'</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/article/articleEdit",
					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/article/articleEdit?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/article/deleteArticle",{id:id}, function(data) {
						console.log(data)
						if(data.code == 0) {
							top.layer.msg("删除成功");
							initdata(queryObj);
							layer.close(index);
						}else{
							top.layer.msg(data.msg);
						}
					})
				
			}, function(index, layero) {
				layer.close(index);
			});
			});
			

		})
	</script>

</html>