实现的效果：
前端代码：
<!DOCTYPE HTML>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>菜单管理</title>
<link href="/assets/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/assets/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="/assets/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
<link href="/assets/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
<link href="/assets/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<section class="col-lg-12 connectedSortable">
<!-- bootstrap容器 -->
<table id="table" data-toolbar="#toolbar"></table>
</section>
</div>
</div>
<script src="/assets/plugins/jquery.1.12.4.min.js"></script>
<script src="/assets/js/jquery.validate.min.js"></script>
<script src="/assets/js/messages_zh.js"></script>
<script src="/assets/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="/assets/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
<script src="/assets/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/assets/plugins/waves-0.7.5/waves.min.js"></script>
<script src="/assets/plugins/zTree_v3/js/jquery.ztree.all.min.js"></script>
<script src="/assets/plugins/zTree_v3/js/jquery.ztree.core.min.js"></script>
<script src="/assets/plugins/zTree_v3/js/jquery.ztree.excheck.min.js"></script>
<script src="/assets/plugins/layer/layer.js"></script>
<script src="/assets/plugins/jquery.form.js"></script>
<script>
//菜单的根id
var parentId = '0';
$(function () {//打开页面之后执行的代码
//初始化根菜单（先查询parentI为0的菜案）
createTable(parentId);
});
/**
* 初始化根菜单列表
* @param parentId 父ID
*/
function createTable(parentId) {
$('#table').bootstrapTable({
classes: 'table table-hover table-striped',
url: '/sysMenu/list',
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
// sortOrder: "asc", //排序方式
queryParams: queryParams,
refresh: function () {
$("#table").bootstrapTable('refresh', {url: 'sysMenu/list'});
},
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 15, //每页的记录行数（*）
pageList: [15, 25, 50], //可供选择的每页的行数（*）
// search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
// minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
// height: 545, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "menuId", //每一行的唯一标识，一般为主键列
// showToggle:true, //是否显示详细视图和列表视图的切换按钮
queryParams: { parentId: parentId },
ajaxOptions: { parentId: parentId },
columns: [
{field: 'menuId', title: 'ID', sortable: true, halign: 'center'},
{field: 'menuName', title: 'menuId', sortable: true, halign: 'center'},
{field: 'parentId', title: 'parentId', sortable: true, halign: 'center'},
{field: 'dataUrl', title: 'URL', sortable: true, halign: 'center'},
{field: 'sequence', title: 'sequence', sortable: true, halign: 'center'},
{field: 'permission', title: 'permission', sortable: true, halign: 'center'},
{field: 'menuType', title: 'menuType', sortable: true, halign: 'center'},
{field: 'systemId', title: 'systemId', sortable: true, halign: 'center'},
{field: 'display', title: 'display', sortable: true, halign: 'center'},
{
field: 'action',
title: '操作',
halign: 'center',
align: 'center',
formatter: 'actionFormatter',
events: 'actionEvents',
clickToSelect: false
}
],
/* *****父子表的关键部分***** */
detailView: true, //是否显示详情折叠(开启父子表)，会在每一行的最前面显示一个加号
//注册加载子表的事件
onExpandRow: function (index, row, $detail) {
//点击左侧的加号 展开查看详情的时候调用（加载子菜单） 在这里做了递归调用自身再次构建一张表 这里的child-table-row.id是为了修改或者删除，刷新子表使用
createSubTable(index, row, $detail);
},
//加载成功之后执行
onLoadSuccess: function (data) {
}
});
}
//加载子菜单列表
createSubTable = function (index, row, $detail) {
var parentId = row.menuId;
var cur_table = $detail.html('<table></table>').find('table');
$(cur_table).bootstrapTable({
classes: 'table table-hover table-striped',
url: '/sysMenu/list',
method: 'get', //请求方式（*）
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
sortable: false, //是否启用排序
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageSize: 50, //每页的记录行数（*）
pageList: [15, 25, 50], //可供选择的每页的行数（*）
uniqueId: "menuId", //每一行的唯一标识，一般为主键列
queryParams: { parentId: parentId },
ajaxOptions: { parentId: parentId },
columns: [
{field: 'menuId', title: 'ID', sortable: true, halign: 'center'},
{field: 'menuName', title: 'menuId', sortable: true, halign: 'center'},
{field: 'parentId', title: 'parentId', sortable: true, halign: 'center'},
{field: 'dataUrl', title: 'URL', sortable: true, halign: 'center'},
{field: 'sequence', title: 'sequence', sortable: true, halign: 'center'},
{field: 'permission', title: 'permission', sortable: true, halign: 'center'},
{field: 'menuType', title: 'menuType', sortable: true, halign: 'center'},
{field: 'systemId', title: 'systemId', sortable: true, halign: 'center'},
{field: 'display', title: 'display', sortable: true, halign: 'center'},
{
field: 'action',
title: '操作',
halign: 'center',
align: 'center',
formatter: 'actionFormatter',
events: 'actionEvents',
clickToSelect: false
}
],
detailView: true, //是否显示详情折叠(开启父子表)，会在每一行的最前面显示一个加号
//注册加载子表的事件
onExpandRow: function (index, row, $detail) {
//点击左侧的加号 展开查看详情的时候调用 在这里做了递归调用自身再次构建一张表 这里的child-table-row.id是为了修改或者删除，刷新子表使用
createSubTable(index, row, $detail);
},
//加载成功之后执行
onLoadSuccess: function (data) {
}
});
}
//bootstarp-table 传递参数设置
function queryParams(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageSize: params.limit, //页面大小
pageNumber: (params.offset / params.limit) + 1, //当前页码, //页码
parentId: parentId,
};
return temp;
}
//列表操作栏 操作按钮设置
function actionFormatter(value, row, index) {
return [
'<a class="edit ml10" href="javascript:void(0);" οnclick="sysMenuAdd(' + row.menuId + ')" data-toggle="tooltip" title="添加子菜单"><i class="glyphicon glyphicon-plus"></i></a> ',
'<a class="edit ml10" href="javascript:void(0);" οnclick="sysMenuEdit(' + row.menuId + ')" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a> ',
'<a class="edit ml10" href="javascript:void(0);" οnclick="sysMenuDelete(' + row.menuId + ')" data-toggle="tooltip" title="删除"><i class="glyphicon glyphicon-trash"></i></a> '
].join('');
}
</script>
</body>
</html>
服务端代码
服务端就只牵扯到一个id的接收 然后查询 其实后台没什么
/**
*
* @param PublicConditions 公共条件类，页面的检索条件之类的
* @param parentId 父Id
* @return
*/
@RequestMapping("/list")
@ResponseBody
public Object list(PublicConditions publicConditions ,String parentId) {
conditionVO.setParentId(parentId);
Page<SysMenu> pageBreakByCondition = sysMenuService.findPageBreakByCondition(conditionVO);
PageResult pageResult = ResultUtil.tablePage(pageBreakByCondition);
return pageResult;
}
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
