版权声明：转载请联系博主，一般是同意的 https://blog.csdn.net/weixin_43647224/article/details/84398257
效果图
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.thymeleaf.org ">
<head>
<meta charset="utf-8"/>
<title>菜单管理</title>
</head>
<style type="text/css">
.table {
table-layout: fixed;
}
.treegrid-tbody td {
border: 0 !important;
border-left: 1px solid #e7eaec !important;
border-bottom: 1px solid #e7eaec !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<body>
<!--bug 要实现效果，需要将js css 放进body-->
<link th:href="@{/assets/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
<link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-table/jquery.treegrid.min.css}">
<ol class="breadcrumb">
<li class="active"></li>
<li class="active">菜单管理</li>
</ol>
<div id="main">
<div class="form-group">
<div>
<a role="button" onclick="doEdit(0)" class="btn btn-info"><i class="fa fa-plus"></i> 新增</a>
<a role="button" onclick="doEdit()" class="btn btn-info"><i class="glyphicon glyphicon-pencil"></i> 修改</a>
<a role="button" onclick="doDelete()" class="btn btn-warning"><i class="glyphicon glyphicon-minus"></i> 删除</a>
</div>
</div>
<table id="table"></table>
</div>
</body>
<script th:src="@{/assets/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/assets/plugins/bootstrap-table/bootstrap-table-treegrid.js}"></script>
<script th:src="@{/assets/plugins/bootstrap-table/jquery.treegrid.min.js}"></script>
<!--modal-->
<div th:include="/fragments/modal::editModal"></div>
<script type="text/javascript">
// 刷新列表
function reloadtable() {
$("#table").bootstrapTable('refresh');
}
window.localStorage.setItem("menuId",'0');
function doEdit(Editkey) {
if(Editkey==0){
$("#editModal .modal-body").load(Main.getContextPath() + "/sys/menu/doEdit", {"menuId": 0, "access_token": localStorage.getItem("token")});
}else{
$("#editModal .modal-body").load(Main.getContextPath() + "/sys/menu/doEdit", {"menuId": window.localStorage.getItem("menuId"), "access_token": localStorage.getItem("token")});
}
$("#editModal").modal("show");
}
// 删除
function doDelete() {
Api.post({
url: Main.getContextPath() + "/sys/menu/doDelete",
data: {"menuId": window.localStorage.getItem("menuId")},
success: function (data) {
toastr.success(data.message);
reloadtable();
},
error: function (data) {
toastr.error(data.message);
}
})
}
var $table = $('#table');
$(function () {
$table.bootstrapTable({
url: Main.getContextPath() + '/sys/menu/find?access_token=' + localStorage.getItem("token"),
method: 'get',
dataType: 'json',
columns: [
{
field: 'check',
checkbox: true,
radio: true
},
{
field: 'name',
title: '菜单名称',
align: 'center',
valign: 'middle',
width: '180px'
},
{
field: 'menuId',
title: '菜单ID',
// visible: false,
align: 'center',
valign: 'middle',
width: '80px'
},
{
field: 'icon',
title: '图标',
align: 'center',
valign: 'middle',
width: '80px',
formatter: 'iconFormatter'
},
{
field: 'type',
title: '类型',
align: 'center',
valign: 'middle',
width: '100px',
formatter: 'typeFormatter'
},
{
field: 'orderNum',
title: '排序号',
align: 'center',
valign: 'middle',
width: '40px'
},
{
field: 'url',
title: '菜单URL',
lign: 'center',
valign: 'middle',
width: '160px'
},
{
field: 'perms',
title: '授权标识',
align: 'center',
valign: 'middle'
},
],
idField: 'menuId',//排序id 如不设默认不显示父子级
treeShowField: 'name',
parentIdField: 'parentId',
singleSelect: true,//单选
height: $(window).height() - ($(window).height() * 0.3),//自定义高度
onCheck: function (row) {
var datas = $table.bootstrapTable('getData');
window.localStorage.setItem("menuId",row.menuId);
},
onResetView: function (data) {
// jquery.treegrid.js
$table.treegrid({
initialState: 'collapsed',//设置开闭
treeColumn: 1,//指明第几列数据改为树形
onChange: function () {
$table.bootstrapTable('resetWidth');
}
});
}
,
}
);
});
//格式化类型 0：目录 1：菜单 2：按钮'
function typeFormatter(value, row, index) {
if (value === 0) {
return '<span class="label label-primary">目录</span>';
} else if (value === 1) {
return '<span class="label label-success">菜单</span>';
} else {
return '<span class="label label-warning">按钮</span>';
}
}
//格式化图标
function iconFormatter(value, row, index) {
return '<i class="' + value + '"></i>';
}
</script>
</html>