<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>首页--工作台</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all" />
<link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all" />
</head>
<body class="childrenBody">
<!--表单开始-->
<form class="layui-form" id="searchFrm" method="post" action="">
<!--搜索框-->
<div class="layui-inline">
<label class="layui-form-label">按开始日期</label>
<div class="layui-input-inline">
<input type="text" name="startDate" id="startDate" placeholder="yyyy-MM-dd" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">按结束日期</label>
<div class="layui-input-inline">
<input type="text" name="endDate" id="endDate" placeholder="yyyy-MM-dd" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">单选下拉框</label>
<div class="layui-input-inline">
<select name="typeid" id="search_typeid">
<option value="1">请选择</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<button type="button" id="doAdd" class="layui-btn layui-btn-primary">添加</button>
</div>
</div>
</form>
<!--表格容器-->
<table id="demo" lay-filter="test"></table>
<!--表格容器结束-->
<!--添加新闻数据的弹出层开始-->
<div id="addNewsDiv" style="display: none;">
<form id="dataFrm" method="post" class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-inline">
<label class="layui-form-label">按结束日期</label>
<div class="layui-input-inline">
<input type="text" name="endDate" id="newstime" placeholder="yyyy-MM-dd" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">内容文本域</label>
<div class="layui-input-block">
<textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="doSubmit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<!--添加数据的弹出层结束-->
<script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>
<script type="text/javascript">
//加载layui
layui.use(['form','element','layer','laydate','jquery','table'],function(){
var laydate = layui.laydate;
var form = layui.form, $ = layui.jquery;
var table = layui.table;
//第一个实例
var tableIns = table.render({
elem: '#demo'
,height: 312
,url: '/news/listNews' //数据接口
,page: true //开启分页
,cols: [ [ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'title', title: '用户名', width:80}
,{field: 'content', title: '性别', width:80, sort: true}
] ]
});
//绑定时间选择器
laydate.render({
elem:'#newstime',
type:'datetime'
});
//获取到 初始化下拉查询列表
$.get("/type/loadAllType",function (objs) {
var types = objs.data;
var search_typeid = $("#search_typeid");
$.each(types,function (index,item) {
//追加数据
search_typeid.append("<potion value="+item.id+">"+item.name+"</potion>");
});
//重新渲染
form.render("select");
});
//模糊查询
form.on("submit(doSearch)",function (data) {
//ajax方式发送数据
$.post("/news/listNews",data.field,function () {
tableIns.reload({
url:'/news/listNews',
where:data.field
});
return false;
});
//添加弹出层
var mainIndex;
$("#doAdd").on("click",function () {
mainIndex = layer.open({
type:1,
content:$("#addNewsDiv"),
area:['500px','600px']
//弹出层加载成功之后success:function(获取div追加数据){}
})
});
//监控提交弹出层的按钮
form.on("submit(doSubmit)",function (data) {
//发送数据
$.post("/news/addNews",data.field,function (res) {
layer.msg(res.msg); //弹出来看看结果
if(res.code==200){ //添加成功，询问是否关闭
layer.confirm('是否要关闭？',{
btn: ['继续','取消']
},function () {
$("#dataFrm")[0].reset();
},function () {//关闭弹窗
layer.close(mainIndex);
});
}
//无论成功还是失败，父页面 要刷新
tableIns.reload();
});
return false;
});
});
});
</script>
</body>
</html>
