Spring Boot 入门（六）：集成 treetable 和 zTree 实现树形图

本篇文章是接着Spring Boot 入门（五）：集成 AOP 进行日志管理写的，主要集成了树形图，在部门列表或者权限列表中，树形图经常被用上。主要是根据相应的 API 凭借 html 字符串

1.treetable

页面代码如下：

"/plugins/treeTable/themes/default/treeTable.css" rel="stylesheet" type="text/css" />


	
"row">
	
"col-xs-12">
	   
"box">
	     
"box-header  with-border">
		    type="button" class="close" data-dismiss="modal" aria-label="Close">
		        "true">&times
		    
	       
"box-title">选择部门
	     
	     
"box-body">
			"tcXzqh_tab" class="table table-striped table-bordered table-hover">
		       

		           

					
部门编号
					
部门名称
					
上级部门编号
					
上级部门名称
				   
		       
			   

			   
		   
	     
	   
	

  

复制代码

首先引入相应的 JS 文件和样式文件

然后初始化列表界面

此部分对应的后台只需要返回一个 List 集合即可，用于初始化界面，其效果如下：

由于需要在展开节点的时候需要动态加载，所以需要实现 expend 方法

在展开节点的时候，需要根据父节点去查找其下级几点的信息，并返回给页面，实现动态加载树形图，其效果如下：

2.ztree

引入 JS 和 CSS 样式

"stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">


复制代码

编写一个div，用于存放树形图

 
"form-group clearfix">
          "parentdmLabel" class="col-sm-2 control-label" style="text-align:right">菜单权限
          
"col-sm-10">
              
"treeDemoUpdate" class="ztree">
          
  
复制代码

JS部分代码

复制代码

效果如下：

转载于:https://juejin.im/post/5c8e22f46fb9a070bd599217