SpringBoot+Jquery+jsTree实现页面树型结构
场景
效果
jstree官网
https://www.jstree.com/
实现
引用CSS样式
使用cdn或者将其下载
引用jquery
因为jstree依赖于jquery，所以要在页面中引入jquery。
引用jstree
或者
页面元素
在html页面中设置同一个div，作为树出现的容器。
架构管理
js代码
创建实例
$(function () { $('#org_tree').jstree(); });监听事件
$('org_tree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});事件清单
https://www.jstree.com/api/#/?q=.jstree%20Event&f=init.jstree
与实例交互
当实例准备就绪后，可以在上调用方法。
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});可用方法清单
https://www.jstree.com/api/
以上是官方简单 示例代码。
实现与SpringBoot交互获取数据
html页面代码
架构管理页面
架构管理
-
架构详情
架构编号
--
架构名称
--
架构图标
--
分类
--
是否启用
--
是否失效
--
是否选中
--
是否顶级
--
备注
--
注：
页面布局是左边是一个jstree的容器
然后右边是点击具体某一个节点时显示的详情显示
js代码
$(document).ready(function() {
//初始化数据
initJsTree();
});
function initJsTree(IsOpened) {
if(IsOpened==undefined){
/*如果是首次进入则默认查启用的*/
IsOpened=1;
}
var url = "/sysEnterpriseOrg/doListOrgRecursion.do";
//获取Cookie中存取的选中的节点
var select_id = Cookies.get("select_id");
//后台请求数据时传递的参数
var data = {selectedId:select_id,IsOpened:IsOpened};
//向后台发送post请求
$.post(url,data).done(function (res) {
//如果响应状态为true
if(res.status){
//先清空数据
$('#org_tree').data('jstree', false).empty();
//给jstree赋值
$('#org_tree').jstree({'core':{
'data': res.data,
"multiple" : false, // 设置不能多选，即只能单选
}}).on("ready.jstree", function (e, data) { // jstree节点加载完成后调用的监听函数
var inst = data.instance;
//获取选中的子节点对象
var obj = inst.get_node(e.target.firstChild.firstChild.lastChild);
//如果选中的值未定义，则将最底层的赋予选中的值
if(typeof(select_id) == "undefined"){
select_id = obj.id;
}
//将选中的id封装成json值
var jsonData = {"id" : select_id};
//设置定时器，0.2秒请求数据
setTimeout(function () {
$.post("/sysEnterpriseOrg/doGetSingleOrgDetails.do",jsonData).done(function (res) {
if(res.status){
//给详情部分赋值
$("#num").text(res.data.num);
$("#text").text(res.data.text);
//图标赋值
$("#icon").html(''+res.data.icon);
//根据返回的数字显示相应的中文
switch(res.data.orgClassify){
case 0:
$("#orgClassify").text("集团");
break;
case 1:
$("#orgClassify").text("公司");
break;
case 2:
$("#orgClassify").text("工厂");
break;
case 3:
$("#orgClassify").text("部门");
break;
case 4:
$("#orgClassify").text("岗位");
break;
default:
$("#orgClassify").text("未知分类");
}
$("#opened").text(1==res.data.opened?"是":"否");
$("#disabled").text(1==res.data.disabled?"是":"否");
$("#selected").text(1==res.data.selected?"是":"否");
$("#isTopLevel").text(1==res.data.isTopLevel?"是":"否");
$("#remark").text(res.data.remark);
//刷新
data.instance.refresh();
}
}).fail(function (err) {//数据加载失败后
alert("数据加载失败，请重新尝试！");
});
},200);
}).on("activate_node.jstree", function (e, data) { // 此事件是获取当前活动状态节点（获取当前被点击的节点）
Cookies.set("select_id",data.node.id);
var data = {"id" : data.node.id};
$.post("/sysEnterpriseOrg/doGetSingleOrgDetails.do",data).done(function (res) {
if(res.status){
$("#num").text(res.data.num);
$("#text").text(res.data.text);
$("#icon").html(''+res.data.icon);
switch(res.data.orgClassify){
case 0:
$("#orgClassify").text("集团");
break;
case 1:
$("#orgClassify").text("公司");
break;
case 2:
$("#orgClassify").text("工厂");
break;
case 3:
$("#orgClassify").text("部门");
break;
case 4:
$("#orgClassify").text("岗位");
break;
default:
$("#orgClassify").text("未知分类");
}
$("#opened").text(1==res.data.opened?"是":"否");
$("#disabled").text(1==res.data.disabled?"是":"否");
$("#selected").text(1==res.data.selected?"是":"否");
$("#isTopLevel").text(1==res.data.isTopLevel?"是":"否");
$("#remark").text(res.data.remark);
data.instance.refresh();
}
}).fail(function (err) {
alert("数据加载失败，请重新尝试！");
});
})
}else{
swal({
type: 'error',
title: '错误提示',
text: '接口访问异常，请联系管理员！'
})
}
}).fail(function (err) {
swal({
type: 'error',
title: '错误提示',
text: '权限数据加载失败，请重新尝试！'
})
});
}后台代码
获取树形结构的请求接口
@Description("获取架构树形结构")
@RequestMapping(value = "/doListOrgRecursion.do", method = RequestMethod.POST)
@ResponseBody
public Json doListOrgJsTree(String selectedId,String IsOpened){
try {
ResultDTO resultDTO = this.mSysEnterpriseOrgService.doListOrgJsTree(selectedId,IsOpened);
return Json.getInst().success(resultDTO.getData());
} catch (Exception e) {
Log.getInst(this).debug("架构Tree",e);
return Json.getInst().fail();
}
}其中Json是封装的json请求类
package com.ws.sys.vo;
import lombok.Data;
import java.io.Serializable;
@Data
public class Json implements Serializable {
//默认未失败状态
private static Json instance;
private String msg = "接口访问失败";
private String title = "失败提示";
private boolean status = false;
private int code = 300;
private Object data = null;
public synchronized static Json getInst() {
if(instance==null){
instance = new Json();
}
return instance;
}
public Json() {
super();
}
public Json success(Object data){
this.title = "成功提示";
this.msg = "接口访问成功";
this.status = true;
this.code = 200;
this.data = data;
return this;
}
public Json success(){
this.title = "成功提示";
this.msg = "接口访问成功";
this.status = true;
this.code = 200;
this.data = null;
return this;
}
public Json fail(Object data){
this.title = "失败提示";
this.msg = "接口访问失败";
this.status = false;
this.code = 300;
this.data = data;
return this;
}
public Json fail(){
this.title = "失败提示";
this.msg = "接口访问失败";
this.status = false;
this.code = 300;
this.data = null;
return this;
}
}ResultDTO是封装的结果类
package com.ws.sys.dto;
import lombok.Data;
import java.io.Serializable;
@Data
public class ResultDTO implements Serializable{
//默认未失败状态
private static ResultDTO instance;
private String msg = "数据返回失败";
private boolean status = false;
private Object data = null;
public synchronized static ResultDTO getInst() {
if(instance==null){
instance = new ResultDTO();
}
return instance;
}
public ResultDTO() {
super();
}
public ResultDTO success(Object data){
this.msg = "数据返回成功";
this.status = true;
this.data = data;
return this;
}
public ResultDTO success(){
this.msg = "数据返回成功";
this.status = true;
this.data = null;
return this;
}
public ResultDTO fail(Object data){
this.msg = "数据返回失败";
this.status = false;
this.data = data;
return this;
}
public ResultDTO fail(){
this.msg = "数据返回失败";
this.status = false;
this.data = null;
return this;
}
}具体实现类
public ResultDTO doListOrgJsTree(String selectedId,String IsOpened) {
if(StringUtils.isBlank(selectedId)) {
IPage sysEnterpriseOrgIPage = page(new Page(0, 1), new QueryWrapper().eq("is_delete", Constants.IS_NOT_DELETE));
if (!(sysEnterpriseOrgIPage.getRecords() != null && !sysEnterpriseOrgIPage.getRecords().isEmpty()))
return ResultDTO.getInst().fail();
selectedId = sysEnterpriseOrgIPage.getRecords().get(0).getId().toString();
}
List treeVOList = new ArrayList();
//查询启用的
if(IsOpened.trim().equals("1")){
treeVOList= this.baseMapper.listOrgJsTreeOpened(selectedId);
}
//查询全部的
if(IsOpened.trim().equals("2")){
treeVOList= this.baseMapper.listOrgJsTree(selectedId);
}
return ResultDTO.getInst().success(treeVOList);
}
其中TreeJsonVO是封装的树型数据类
package com.ws.sys.vo;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
@Data
@NoArgsConstructor
@JsonIgnoreProperties({ "handler","hibernateLazyInitializer" })
public class TreeJsonVO implements Serializable {
// 主键
private String id;
// 父类主键
private String parent;
// 图标
private String icon;
// 名称
private String text;
// 编码
private String code;
/**
* 跳转地址
*/
private String url;
/**
* 等级（权限的层次等级）
*/
private Integer permissionLevel;
/**
* 类型（用来区分菜单0和按钮操作1）
*/
private Integer permissionType;
/**
* 属性菜单的折叠状态（0折叠，1展开）
*/
private Integer foldState;
private String selectedId;
// 是否打开
private TreeJsonStateVO state;
}
执行查询的sql部分
数据库设计
根据每条记录的pid（负极节点ID）字段来区分分支关系。
