咱们能够用 TreeGrid 插件来实现菜单目录以树结构来出现具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 css-->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/treegrid/jquery.treegrid.css"/></head>
<body>
<div>
<table id="menu-table"></table>
</div>
<!-- 引入 js-->
<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
<script src="bower_components/treegrid/jquery.treegrid.min.js"></script>
<script src="bower_components/treegrid/tree.table.js"></script>
<script>
var columns = [
{
title : '菜单 ID',
field : 'id',
align : 'center',
valign : 'middle',
width : '80px'
},
{
title : '菜单名称',
field : 'name',
align : 'center',
valign : 'middle',
width : '130px'
},
{
title : '上级菜单',
field : 'parentName',
align : 'center',
valign : 'middle',
sortable : true,
width : '100px'
}];// 格局来自官网 demos -->treeGrid(jquery 扩大的一个网格树插件)
let treeTable=new TreeTable("menu-table","/menu/doFindObjects",columns);
treeTable.init();// 底层基于 url 向服务端发动异步申请
</script>
</body>
</html>须要留神引入的 js 程序不能颠倒，因为 treegrid，bootstrap 都是依靠于 jquery