话不多说，直接上代码
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <meta charset="UTF-8"> <title>日志管理</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <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="icon" href="/favicon.ico"> <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all"/> <link rel="stylesheet" href="/resources/css/public.css" media="all"/> </head> <body class="childrenBody"> <!--查询条件开始--> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>日志管理</legend> </fieldset> <blockquote class="layui-elem-quote"> <form class="layui-form" id="searchForm" method="post" lay-filter="searchForm"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">标题</label> <div class="layui-input-inline"> <input type="text" name="title" id="title" class="layui-input input-radius" placeholder="请输入标题"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">发布人员</label> <div class="layui-input-inline"> <input type="text" name="opername" id="opername" class="layui-input input-radius" placeholder="请输入发布人员"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">开始时间</label> <div class="layui-input-inline"> <input type="text" name="startTime" id="startTime" readonly="readonly" placeholder="yyyy-MM-dd" class="layui-input input-radius"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">结束时间</label> <div class="layui-input-inline"> <input type="text" name="endTime" id="endTime" readonly="readonly" placeholder="yyyy-MM-dd" class="layui-input input-radius"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-block" > <button type="button" class="layui-btn layui-btn-radius" lay-submit="" lay-filter="doSearch"><span class=" layui-icon layui-icon-search"></span>查询</button> <button type="reset" class="layui-btn layui-btn layui-btn-warm layui-btn-radius"><span class=" layui-icon layui-icon-refresh-3"></span>重置</button> </div> </div> </form> </blockquote> <!--查询条件结束--> <!--分页表格开始--> <table class="layui-hide" id="noticeTable" lay-filter="noticeTable"></table> <div id="noticeToolBar" style="display: none"> <button type="button" lay-event="add" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius"> <i class="layui-icon layui-icon-add-1"></i>添加公告 </button> <button type="button" lay-event="batchDelete" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius"> <i class="layui-icon layui-icon-delete"></i>批量删除 </button> </div> <!--shiro:hasPermission="info:delete"--> <!--shiro:hasPermission="info:batchdelete"--> <div id="noticeRowBar" style="display: none;"> <button type="button" lay-event="show" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius"><i class="layui-icon layui-icon-tips"></i>查看 </button> <button type="button" lay-event="update" class="layui-btn layui-btn-sm layui-btn-radius"><i class="layui-icon layui-icon-edit"></i>编辑 </button> <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-delete"></i>删除 </button> </div> </div> <!--分页表格结束--> <!--添加和修改数据表格开始--> <div style="display: none;padding: 10px;margin-right: 4%" id="addOrUpdateDiv" > <form class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm"> <div class="layui-form-item"> <label class="layui-form-label" >公告标题</label> <div class="layui-input-block"> <input type="hidden" name= "id" /> <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label" >公告内容</label> <div class="layui-input-block"> <textarea class="layui-textarea" name="content" lay-verify="content" id="content"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block" style="text-align: center;padding-right: 7%"> <button type="button" class="layui-btn layui-btn-radius" lay-submit="" id="doSubmit"><i class="layui-icon layui-icon-search layui-icon-normal"></i>提交 </button> <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm"><i class="layui-icon layui-icon-refresh"></i><span>重置</span> </button> </div> </div> </form> </div> <!--添加和修改数据表格结束--> <!--查看公告弹出层--> <div id="showNoticeDiv" style="display: none;padding: 10px"> <h3 id="notice_title" style="text-align: center"></h3> <div style="text-align: right;margin-top: 2%"> 发布人：<span id="notice_opername"></span> 发布时间：<span id="notice_createtime"></span> </div> <hr> <div id="notice_content"></div> </div> <!--查看公告弹出层结束--> <script type="text/javascript" src="/resources/layui/layui.js"></script> <script type="text/javascript">
//使用哪个模块就要引入哪个模块
layui.use(['jquery', 'form', 'layer', 'laydate', 'table','layedit'], function () { var $ = layui.jquery; var form=layui.form; var layer = layui.layer; var laydate = layui.laydate; var table = layui.table; var layedit=layui.layedit; //初始化时间选择器 laydate.render({ elem: "#startTime", type: "datetime" }); laydate.render({ elem: "#endTime", type: "datetime" }); //打开添加页面 var mainIndex; var type; //初始化富文本编译器 var editIndex = layedit.build('content'); //初始化表格 var tableIns = table.render({ elem: "#noticeTable", title: "日志数据表格", url: "/notice/loadAllNotice", toolbar: "#noticeToolBar", page: true, height: "full-190", cols: [ [ {type: 'checkbox', fixed: 'left'}, {field: 'id', title: 'ID', align: 'center'}, {field: 'title', title: '标题', align: 'center'}, {field: 'opername', title: '发布人', align: 'center'}, {field: 'createtime', title: '创建时间', align: 'center'}, {fixed: 'right', title: '操作', toolbar: '#noticeRowBar', align: 'center'} ] ], done:function (data, curr, count) { //不是第一页时，如果当前返回的数据为0那么就返回上一页 if(data.data.length==0&&curr!=1){ tableIns.reload({ page:{ curr:curr-1 } }) } } }); //监控模糊查询按钮事件 form.on("submit(doSearch)", function (data) { tableIns.reload({ where: data.field, page: { curr: 1 } }); return false; }); //监控工具条事件 //批量删除和添加 table.on("toolbar(noticeTable)", function (obj) { switch (obj.event) { case 'batchDelete': batchDelete(); break; case 'add': openAdd(); break; }; }); //监控行工具条事件 //查看，编辑，删除 table.on("tool(noticeTable)",function (obj) { //获取当前行数据 var data = obj.data; switch (obj.event){ case 'show': showNotice(data); break; case 'update': updateNotice(data); break; case 'delete': deleteNotice(data); break; }; }); //打开添加的弹出层 function openAdd() { mainIndex = layer.open({ type:1, content:$("#addOrUpdateDiv"), area:['800px','550px'], title:'添加公告', success:function () { $('#dataFrm')[0].reset(); //重置富文本编译器的内容为空 layedit.setContent(editIndex,""); type="POST"; } }); }; //打开修改的弹出层 function updateNotice(data) { mainIndex = layer.open({ type:1, content:$("#addOrUpdateDiv"), area:['800px','550px'], title:'修改公告', success:function () { //装载新的数据 $('#dataFrm')[0].reset(); form.val("dataFrm",data); layedit.setContent(editIndex,data.content); //装载新的数据 type="PUT"; } }); }; $("#doSubmit").click(function () { //同步富文本和textarea里面的内容 layedit.sync(editIndex); var datas = $("#dataFrm").serialize(); $.ajax({ url:"/notice/notices", //请求的URL地址 type:type, //请求方法，GET、POST、PUT、DELETE在这里设置 timeout:5000, //超时时间 dataType:'json', data:datas, //返回的数据格式：json/xml/html/script/jsonp/text success:function(data){ //成功的回调函数 if (data.code==200){ tableIns.reload(); layer.msg(data.msg) //设置id为result的标签的html内容为返回的data数据 layer.close(mainIndex); } }, }) }); //删除 function deleteNotice(data) { layer.confirm('你确定要删除这条数据吗？',{icon: 3,title:'提示'},function (index) { $.ajax({ url:"/notice/notices", //请求的URL地址 type:"DELETE", //请求方法，GET、POST、PUT、DELETE在这里设置 timeout:5000, //超时时间 dataType:'json', data:{id:data.id}, //返回的数据格式：json/xml/html/script/jsonp/text success:function(res){ //成功的回调函数 if (res.code==200){ tableIns.reload({ where:"", }); layer.msg(res.msg); } }, }) layer.close(index); }); } //批量删除 function batchDelete() { //得到选中行 var checkStatus = table.checkStatus('noticeTable'); var dataLength = checkStatus.data.length; if (dataLength>0){ layer.confirm('你确定要删除这些公告吗？',{icon: 3,title: '提示'},function (index) { //获取选中行数据 var data = checkStatus.data; var ids = ""; $.each(data,function (index, item) { if (index==0){ ids+="ids="+item.id; }else { ids+="&ids="+item.id; } }); $.post("/notice/batchDeleteNotice",ids,function (res) { if (res.code==200){ //重新刷新表格 tableIns.reload({ where:"", }); } layer.msg(res.msg); }); layer.close(index); }); }else { layer.msg("请选中操作行") } } //打开查看的弹出层 function showNotice(data) { mainIndex = layer.open({ type:1, content:$("#showNoticeDiv"), area:['800px','550px'], title:'查看公告', success:function () { $("#notice_title").html(data.title); $("#notice_opername").html(data.opername); $("#notice_createtime").html(data.createtime); $("#notice_content").html(data.content); } }); } }); </script> </body> </html>
package whm.sys.controller; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.core.metadata.IPage; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.apache.commons.lang3.StringUtils; import org.apache.ibatis.annotations.Delete; import org.apache.ibatis.annotations.Param; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import whm.commons.DataGridView; import whm.commons.ResultObj; import whm.commons.WebUtils; import whm.sys.pojo.SysLoginfo; import whm.sys.pojo.SysNotice; import whm.sys.pojo.SysUser; import whm.sys.service.SysNoticeService; import whm.sys.vo.SysLoginfoVo; import whm.sys.vo.SysNoticeVo; import javax.websocket.server.PathParam; import java.io.Serializable; import java.util.ArrayList; import java.util.Collection; import java.util.Date; /** * <p> * 前端控制器 * </p> * * @author Alice * @since 2020-04-02 */ @RestController @RequestMapping("notice") public class SysNoticeController { @Autowired private SysNoticeService sysNoticeService; /** * 查询所有的公告 * @param sysNoticeVo * @return */ @RequestMapping("loadAllNotice") public DataGridView loadAllLoginInfo(SysNoticeVo sysNoticeVo) { //传入分页的属性 IPage<SysNotice> page = new Page<>(sysNoticeVo.getPage(),sysNoticeVo.getLimit()); //条件构造器 QueryWrapper<SysNotice> wrapper = new QueryWrapper<>(); wrapper.like(StringUtils.isNoneBlank(sysNoticeVo.getTitle()),"title",sysNoticeVo.getTitle()); wrapper.like(StringUtils.isNoneBlank(sysNoticeVo.getOpername()),"opername",sysNoticeVo.getOpername()); wrapper.ge(sysNoticeVo.getStartTime()!=null,"createtime",sysNoticeVo.getStartTime()); wrapper.le(sysNoticeVo.getEndTime()!=null,"createtime",sysNoticeVo.getEndTime()); wrapper.orderByDesc("createtime"); sysNoticeService.page(page,wrapper); return new DataGridView(page.getTotal(),page.getRecords()); } //用restful风格实现增删改查操作 /** * 用POST请求做添加操作 * @param sysNoticeVo * @return */ @PostMapping("notices") public ResultObj addNotices(SysNoticeVo sysNoticeVo){ try { sysNoticeVo.setCreatetime(new Date()); SysUser user = (SysUser) WebUtils.getSession().getAttribute("user"); sysNoticeVo.setOpername(user.getName()); sysNoticeService.save(sysNoticeVo); System.out.println(ResultObj.UPDATE_SUCCESS); return ResultObj.ADD_SUCCESS; } catch (Exception e) { e.printStackTrace(); return ResultObj.ADD_ERROR; } } /** * 用PUT请求做修改操作 * @param sysNoticeVo * @return */ @PutMapping("notices") public ResultObj updateNotices( SysNoticeVo sysNoticeVo){ try { sysNoticeService.updateById(sysNoticeVo); System.out.println(ResultObj.UPDATE_SUCCESS); return ResultObj.UPDATE_SUCCESS; } catch (Exception e) { e.printStackTrace(); System.out.println(ResultObj.UPDATE_ERROR); return ResultObj.UPDATE_ERROR; } } /** * 删除一条公告 * @param * @return */ @DeleteMapping("notices") public ResultObj deleteNotices(SysNoticeVo sysNoticeVo) { try { System.out.println("看看"+sysNoticeVo.getId()); sysNoticeService.removeById(sysNoticeVo.getId()); return ResultObj.DELETE_SUCCESS; } catch (Exception e) { e.printStackTrace(); return ResultObj.DELETE_ERROR; } } /** * 批量删除公告 * @param * @return */ @RequestMapping("batchDeleteNotice") public ResultObj batchDeleteNotice(SysNoticeVo sysNoticeVo){ try { Collection<Serializable> idList = new ArrayList<>(); for (Integer id : sysNoticeVo.getIds()) { idList.add(id); } sysNoticeService.removeByIds(idList); return ResultObj.DELETE_SUCCESS; } catch (Exception e) { e.printStackTrace(); return ResultObj.DELETE_ERROR; } } }
效果图
