Spring+SpringMVC+MyBatis+layui实现分级列表treeGrid
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<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">
<link rel="stylesheet" href="/plugins/layui/css/layui.css" rel="stylesheet" type="text/css">
<script src="/src/js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="/plugins/layui/layui.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<p>一级菜单栏</p>
<div>
<table class="layui-hidden" id="treetable" lay-filter="complainList"></table>
</div>
<script type="text/html" id="complain_toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addayt" onclick="addayt()">添加二级菜单</button>
<button class="layui-btn layui-btn-sm" lay-event="add" onclick="add()"><i class="layui-icon"></i>添加</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/js/date.js" type="text/javascript"></script>
<script>
layui.use(['element', 'tree', 'layer', 'form', 'upload', 'treeGrid'], function () {
var $ = layui.jquery, tree = layui.tree;
var treeGrid = layui.treeGrid; //很重要
var ptable=treeGrid.render({
elem: '#treetable'
, url: '/templateTheme/listte'
, method: 'post' //默认：get请求
, limit: 10
, toolbar: '#complain_toolbar'//编辑按钮
//treeDefaultClose: true,//是否默认折叠
,treeLinkage: true//父级展开时是否自动展开所有子级
, treeId: 'teThemeId'//树形id字段名称
, treeUpId: 'pid'//树形父id字段名称
, treeShowName: 'teThemeTitle'//以树形式显示的字段
, cols: [
[
{
field: 'teThemeId', width: "10%", title: 'ID',}
,{
field: 'teThemeTitle', width: "10%", title: '标题'}
,{
field: 'teThemeType', width: "15%", title: '菜单',
templet: function (data) {
if (data.teThemeType == 1) {
return "一级菜单";
} else {
return "二级菜单";
}
}
}
, {
field: 'teThemeType', width: "10%", title: '类型',
templet: function (data) {
return "菜单栏";
}
}
//开关按钮
// ,{filed:'teThemeDisplay',width: "10%",title:'显示为页面主题',
// templet: function (data) {
// if(data.teThemeDisplay==1){
// return '';
// } else {
// return '';
// }
// }
// }
,{
field: 'teThemeCreationtime', width: "15%", title: '时间',
templet :function (row){
return createTime(row.teThemeCreationtime);
}
}
, {
fixed: 'right',width: "15%", title: '操作', toolbar: '#barDemo'}
]
]
,page:true
, done: function (res, curr, count) {
//数据的回调用，可不写
}
});
treeGrid.on('tool('+treetable+')',function (obj) {
if(obj.event === 'del'){
//删除行
del(obj);
}else if(obj.event==="add"){
//添加行
add(obj.data);
}
});
treeGrid.on('tool(complainList)', function(obj){
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
var teThemeId = data.teThemeId;
var teThemeTitle= data.teThemeTitle;
switch(obj.event) {
case 'del':
var delIndex = layer.confirm('真的删除id为' + data.teThemeId + "的信息吗?", function(delIndex) {
$.ajax({
url: '/templateTheme/deleteid?teThemeId='+data.teThemeId,
type: "post",
//data:{data.teThemeId},
success: function(ctr) {
if(ctr.data == true) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(delIndex);
console.log(delIndex);
layer.msg("删除成功", {
icon: 1
});
// history.go(0)
} else {
layer.msg(ctr.data, {
icon: 5
});
}
}
});
// layer.close(delIndex);
});
break;
case 'edit':
var index = layer.open({
type: 2,
title: "编辑",
area: ['30%', '60%'],
fix: false,
maxmin: true,//开启最大化最小化按钮
shadeClose: true,
shade: 0.4,
skin: 'layui-layer-rim',
content: ["/personal/themeEdit.html", "no"],
success : function(layero, index){
var body = layui.layer.getChildFrame('body', index);
if(data){
body.find(".teThemeId").val(data.teThemeId);
body.find(".teThemeTitle").val(data.teThemeTitle);
body.find(".teThemeType").val(data.teThemeType);
body.find(".teThemeCreationtime").val(createTime(data.teThemeCreationtime));
body.find(".teThemeDisplay").val(data.teThemeDisplay);
// 记得重新渲染表单
//form.render();
}
}
});
break;
}
});
//按钮开关
// form.on('switch(status)', function(data){
// var id = data.value;
// var teThemeDisplay = this.checked ? '1' : '0';
// $.ajax({
// type: 'POST',
// url: '/templateTheme/update/',
// data: {teThemeId: id, teThemeDisplay: teThemeDisplay},
// beforeSend: function () {
// index = layer.msg('正在切换中，请稍候', {icon: 16, time: false, shade: 0.8});
// },
// success: function (data) {
// if (data.data == true) {
// setTimeout(function () {
// layer.close(index);
// layer.msg('操作成功！');
// }, 2000);
// }else if(data.data==0){
// console.log(data);
// layer.msg('页面显示数据已达上限！');
// //layui ajax刷新本行数据
// $(".layui-laypage-btn").click();
// } else {
// console.log(data);
// layer.msg('数据异常，操作失败！');
// }
// },
// });
// });
});
//添加
function add() {
var teThemeType = 1;
var index = layer.open({
type: 2,
title: "添加",
area: ['30%', '60%'],
fix: false,
maxmin: true,
shadeClose: true,
shade: 0.4,
skin: 'layui-layer-rim',
content: ["/personal/themeAdd.html", "no"],
success : function(layero, index){
var body = layui.layer.getChildFrame('body', index);
if(teThemeType){
body.find(".teThemeType").val(teThemeType);
// 记得重新渲染表单
form.render();
}
}
});
}
//添加
function addayt() {
var teThemeType = 2;
var index = layer.open({
type: 2,
title: "添加",
area: ['30%', '60%'],
fix: false,
maxmin: true,
shadeClose: true,
shade: 0.4,
skin: 'layui-layer-rim',
content: ["/menu/menuAdd.html", "no"],
success : function(layero, index){
var body = layui.layer.getChildFrame('body', index);
if(teThemeType){
body.find(".teThemeType").val(teThemeType);
// 记得重新渲染表单
form.render();
}
}
});
}
</script>
</body>
</html>
在layui.js中 添加 treeGrid:“modules/treeGrid”
将treeGrid.js的包放进 lay.modules中
treeGrid.js
提取码 d6hi
pid 为子标题绑定父标题的id 为父标题时pid 值为0
Mysql 表
CREATE TABLE `template_theme` (
`te_theme_id` int(11) NOT NULL AUTO_INCREMENT,
`pid` int(11) DEFAULT NULL COMMENT '二级菜单栏关联一级菜单id',
`te_theme_title` varchar(255) CHARACTER SET utf8 DEFAULT NULL COMMENT '标题',
`te_theme_display` int(255) DEFAULT '0' COMMENT '是否显示在主页：1是 显示在主页表示为主题',
`te_theme_type` int(2) DEFAULT NULL COMMENT '标题类型 1菜单，2二级菜单',
`te_theme_creationTime` datetime DEFAULT NULL COMMENT '时间',
`te_theme_state` int(10) DEFAULT '0' COMMENT '状态：1删除',
`template_id` int(11) DEFAULT NULL,
PRIMARY KEY (`te_theme_id`)
) ENGINE=InnoDB AUTO_INCREMENT=10051 DEFAULT CHARSET=latin1;
TemplateThemeController
package com.example.demo.controller;
import com.example.demo.entity.TemplateTheme;
import com.example.demo.service.TemplateThemeService;
import io.swagger.annotations.Api;
import lombok.extern.slf4j.Slf4j;
import net.minidev.json.JSONObject;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
*
* 前端控制器
*
*
* @author leong
* @since 2019-11-14
*/
@CrossOrigin(origins="*")
@Api(value = "主题管理", tags = {
"主题管理"})
@RestController
@Slf4j
@RequestMapping(value = "/templateTheme" ,method= RequestMethod.GET)
public class TemplateThemeController {
/**
*
*多级菜单列表
* @author ling 2019-04-27
*/
@PostMapping("listte")
public String list(TemplateTheme teTheme) {
//查询列表数据
List<TemplateTheme> result = baseService.listTeTheme(teTheme);
JSONObject json = new JSONObject();
json.put("code", 0);
json.put("data", result);
return json.toString();
}
}
TemplateThemeService
public interface TemplateThemeService{
List<TemplateTheme> listTeTheme(TemplateTheme teTheme);
}
TemplateThemeServiceImpl
@Service
public class TemplateThemeServiceImpl implements TemplateThemeService {
@Override
public List<TemplateTheme> listTeTheme(TemplateTheme teTheme) {
return baseMapper.listTeTheme(teTheme);
}
}
TemplateThemeMapper
@Mapper
public interface TemplateThemeMapper{
List<TemplateTheme> listTeTheme(TemplateTheme teTheme);
}
TemplateThemeMapper.xml
<!--菜单查询-->
<select id="listTeTheme" resultMap="BaseResultMap" >
select * from template_theme
where te_theme_state=0
<if test='teThemeId!=null and teThemeId!=""'>
and te_theme_id=#{
teThemeId}
</if>
<if test='teThemeDisplay!=null and teThemeDisplay!=""'>
and te_theme_display=#{
teThemeDisplay}
</if>
<if test='templateId!=null and templateId!=""'>
and template_id=#{
templateId}
</if>
<if test='teThemeType!=null and teThemeType!=""'>
and te_theme_type=#{
teThemeType}
</if>
<if test='teThemeId!=null and teThemeId!=""'>
and te_theme_id = #{
teThemeId}
</if>
order by te_theme_id asc
</select>
TemplateThemeController
@ApiOperation(value = "删除")
@PostMapping(value = "/deleteid")
public ObjectRestResponse<?> deleid(@RequestParam Integer teThemeId) {
TemplateTheme teTheme = new TemplateTheme();
teTheme.setTeThemeId(teThemeId);
List<TemplateTheme> result = baseService.listTeTheme(teTheme);
//判断删除的是否是一级菜单
if(result.get(0).getTeThemeType()==1){
String ms = "主菜单无法删除";
return new ObjectRestResponse<>().data(ms);
}else if(result.get(0).getTeThemeDisplay()==1){
//判断菜单是否 是主题
String ms = "请取消菜单的主题属性，再删除";
return new ObjectRestResponse<>().data(ms);
}
themeEdit.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-->
<!--//不缓存-->
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<title>修改</title>
<link rel="stylesheet" type="text/css" href="../js/bootstrap.min.css" >
<script src="../js/jquery.min.js"></script>
<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/css/style.css">
<style>
.layui-form-label{
width: 100px;
}
.layui-input-block {
margin-left: 130px;
min-height: 36px
}
</style>
</head>
<body class="body">
<form class="layui-form" style="width:80%;">
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">id</label>
<div class="layui-input-block">
<!-- 使用隐藏域用于保存编辑项的ID值，便于提交修改 -->
<input type="hidden" class="id" name="id">
<input type="hidden" class="password" name="password">
<input type="hidden" class="userEndTime" name="userEndTime">
<input type="text" name="teThemeId" class="layui-input teThemeId" lay-verify="required" placeholder="请输入id" disabled>
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">标题内容</label>
<div class="layui-input-block">
<input type="text" name="teThemeTitle" class="layui-input teThemeTitle" lay-verify="required" placeholder="请输入标题内容">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">时间</label>
<div class="layui-input-block">
<input type="text" name="teThemeCreationtime" class="layui-input teThemeCreationtime" disabled>
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="demo1">修改</button>
<button type="button" class="layui-btn layui-btn-m layui-btn-primary cancle_btn">取消</button>
</div>
</div>
</form>
<script src="/plugins/layui/layui.js" charset="utf-8"></script>
<script>
console.log(parent.PartitionId);
layui.use(['form','layer','jquery'], function(){
var form = layui.form
,layer = layui.layer
,$=layui.jquery,
table= layui.table
//监听提交
form.on('submit(demo1)', function(data){
//layer.alert(JSON.stringify(data.field))
//data=JSON.stringify(data.field)
$.ajax({
url:'/templateTheme/update',
type:'POST',
dataType:'json',
data:{
teThemeTitle:data.field.teThemeTitle,teThemeId:data.field.teThemeId,},
success:function (cte) {
var rt=cte.data;
if(rt==true){
layer.closeAll('loading');
layer.load(2);
layer.msg("修改成功", {
icon: 6});
setTimeout(function(){
window.parent.location.reload();//修改成功后刷新父界面
}, 1000);
// //加载层-风格
}else{
layer.msg("修改失败", {
icon: 5});
}
}
})
return false;
});
});
</script>
</body>
</html>
TemplateThemeController
@ApiOperation(value = " 修改")
@PostMapping(value = "/update")
public ObjectRestResponse<?> update(TemplateTheme teTheme) {
System.out.println(teTheme);
//判断是否修改页面显示状态
if(teTheme.getTeThemeDisplay()!=null) {
int at = 2;
int count = baseService.counta(at);
//当count 大于9时 说明页面显示的主题已达到上限
if (teTheme.getTeThemeDisplay() == 1) {
if (count < 9) {
return new ObjectRestResponse<>().data(baseService.updateDisplay(teTheme));
}
return new ObjectRestResponse<>().data(0);
}
else {
return new ObjectRestResponse<>().data(baseService.updateDisplay(teTheme));
}
}
return new ObjectRestResponse<>().data(baseService.updateTe(teTheme));
}