咱们能够用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