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相对简单，相关功能已经封装好了。