Java 功能实现 po 实体层
package com.flo.po; import lombok.Data; import java.io.Serializable; import java.util.Date; @Data public class Dept implements Serializable { private Integer id; private Integer parentId; private Integer type; private String name; private Integer status; private Integer sort; private Integer createBy; private Date createTime; private Date updateTime; }dao mapper层 package com.flo.dao;
import com.flo.po.Dept; import org.springframework.stereotype.Component;
import java.util.List; @Component(“deptDao”) public interface IDeptDao { /** * 查询部门信息 */ List findAll();
} mapper 文件
<mapper namespace="com.flo.dao.IDeptDao"> <!--查询所有的部门信息--> <select id="findAll" resultType="com.flo.po.Dept"> select * from dept </select> </mapper>服务接口
package com.flo.service; import com.flo.po.Dept; import java.util.List; public interface IDeptService { /** * 查询全部 */ List<Dept> findAll(); }服务层
package com.flo.service; import com.flo.dao.IDeptDao; import com.flo.po.Dept; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service("deptService") public class IDeptServiceimpl implements IDeptService { @Autowired private IDeptDao iDeptDao; @Override public List<Dept> findAll() { return iDeptDao.findAll(); } }控制层准备工作：创建一个Json数据类
package com.flo.util; import lombok.Data; import java.util.List; @Data public class JsonObject<T> { private Integer code; private String msg; private Long count; private List<T> data; }控制层
package com.flo.controller; import com.flo.po.Dept; import com.flo.service.IDeptService; import com.flo.util.JsonObject; import com.flo.util.R; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.Date; import java.util.List; @Controller public class DeptController { @Autowired private IDeptService deptService; /** * 查询全部数据 */ @RequestMapping("dept/deptAll") @ResponseBody public JsonObject findall(){ List<Dept> list=deptService.findAll(); JsonObject object=new JsonObject(); object.setCode(0); object.setMsg("ok"); object.setCount((long)list.size()); object.setData(list); return object; } /** * 页面渲染 可以理解为访问目录进行数据跳转 */ @RequestMapping("/dept") public String DeptIndex(){ return "pages/dept"; } }前端操作 dept.html （注意此文件在dao文件目录内）
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>menu</title> <link rel="stylesheet" th:href="@{lib/layui-v2.5.5/css/layui.css}" media="all"> <link rel="stylesheet" th:href="@{css/public.css}" media="all"> <style> .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) { height: 34px; line-height: 34px; padding: 0 8px; } </style> </head> <body> <div class="layuimini-container"> <div class="layuimini-main"> <div> <div class="layui-btn-group"> <button class="layui-btn" id="btn-expand">全部展开</button> <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button> </div> <table id="munu-table" class="layui-table" lay-filter="munu-table"></table> </div> </div> </div> <!-- 操作列 --> <script type="text/html" id="auth-state"> {{# if (d.type=='2'){ }} <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> {{# }else{ }} <a class="layui-btn layui-btn-xs" lay-event="add">添加</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> {{# } }} </script> <script th:src="@{lib/layui-v2.5.5/layui.js}" charset="utf-8"></script> <script th:src="@{js/lay-config.js?v=1.0.4}" charset="utf-8"></script> <script> layui.use(['table', 'treetable','form'], function () { var $ = layui.jquery; var table = layui.table; var treetable = layui.treetable; var form=layui.form; // 渲染表格 layer.load(2); treetable.render({ treeColIndex: 1, treeSpid: -1, treeIdName: 'authorityId', treePidName: 'parentId', elem: '#munu-table', url: 'dept/deptAll', page: false, cols: [ [ {type: 'numbers'}, {field: 'name', minWidth: 250, title: '部门名称'}, {field: 'type', minWidth: 200, title: '类型名称', templet: function(res){//类型。0：公司；1：部门；2：科室/小组 if(res.type=='0'){ return '<span class="layui-bg-red">公司</span>' }else if(res.type=='1'){ return '<span class="layui-bg-orange">部门</span>' }else{ return '<span <span class="layui-bg-green">科室/小组</span>' } } }, {field: 'status', minWidth: 100, title: '状态', templet: function(res){//状态。0：正常；1：禁用 if(res.status=='0'){ return '<span class="ayui-badge layui-bg-green">正常</span>' }else{ return '<span <span class="ayui-badge layui-bg-gray">禁用</span>' } } }, {field: 'sort', minWidth: 30, title: '排序号'}, {field: 'createTime', minWidth: 150, title: '创建时间'}, {templet: '#auth-state', width: 200, align: 'center', title: '操作'} ] ], done: function () { layer.closeAll('loading'); } }); $('#btn-expand').click(function () { treetable.expandAll('#munu-table'); }); $('#btn-fold').click(function () { treetable.foldAll('#munu-table'); }); /** * 主要渲染修改数据并且进行修改提交 */ function setFormValue(obj,data){ console.log(data); if (data.status==1){ data.status='off'; }else{ data.status='on'; } form.val("updateSubmit",{ "id":data.id, "parenId":data.parentId, "name":data.name, "sort":data.sort, "status":data.status }); form.on('submit(updateSubmit)',function(data){ var datas =data.field; if(datas.status=='on'){ datas.status=0;//正常状态 }else{ datas.status=1; } //向后台发送数据并进行添加操作 $.ajax({ url:"dept/updateDeptSubmit", type:"POST", data:datas, success:function(result){ //把json对象转string // result=JSON.parse(result); if(result.code==200){ layer.msg("修改成功",{ icon:6, time:500 },function(){ parent.window.location.reload();//重新页面 var iframeIndex = parent.layer.getFrameIndex(window.name); parent.layer.close(iframeIndex); }); }else{ layer.msg("修改失败"); } } }) return false; }) }; //监听工具条 table.on('tool(munu-table)', function (obj) { var data = obj.data; var layEvent = obj.event; if (layEvent === 'del') { layer.msg('删除' + data.id); layer.confirm('真的要删除吗？',function(index){ //直接向服务器发送删除指令 $.ajax({ url:'dept/deleteDeptByID', type:'post', data:{id:data.id}, success:function(suc){ if(suc.code==200){ layer.close(index); layer.msg("删除成功！"); parent.window.location.reload(); }else{ layer.msg("删除失败!!!"); } } }) }) } else if (layEvent === 'edit') { layer.msg('修改' + data.id); //使用弹出层 layer.open({ type:1, title:"修改部门", area: ['50%', '50%'], content: $("#deptUpdateTest") }); //方式1 通过id查询该记录，方式2：获取该选中记录 然后data渲染 setFormValue(obj,data); }else{ //添加操作 var index = layer.open({ title: '添加部门', type: 2, shade: 0.2, maxmin:true, shadeClose: true, area: ['50%', '50%'], content: 'addDept?type='+data.type+'&parentId='+data.id, }); $(window).on("resize", function () { layer.full(index); }); return false; } }); }); </script> <div class="layui-form layuimini-form" id="deptUpdateTest" style="display: none" lay-filter="updateSubmit"> <input type="hidden" name="parentId" > <input type="hidden" name="id" > <div class="layui-form-item"> <label class="layui-form-label required">部门名称</label> <div class="layui-input-block"> <input type="text" name="name" lay-verify="required" lay-reqtext="部门名不能为空" placeholder="请输入部门名称" value="" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label ">排序号</label> <div class="layui-input-block"> <input type="number" name="sort" placeholder="请输入排序号" value="" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn layui-btn-normal" lay-submit lay-filter="updateSubmit">确认修改</button> </div> </div> </div> </body> </html>运行效果 前端文件说明 总结： 前端还需要再写很多东西的，而且以后发展的趋势越来越向前端倾斜。Layui相对简单，相关功能已经封装好了。
