场景
效果
jstree官网
实现
引用CSS样式
使用cdn或者将其下载
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /><link rel="stylesheet" href="dist/themes/default/style.min.css" />引用jquery
因为jstree依赖于jquery，所以要在页面中引入jquery。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>引用jstree
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>或者
<script src="dist/jstree.min.js"></script>页面元素
在html页面中设置同一个div，作为树出现的容器。
<div class="col-lg-3">
<h5>架构管理</h5>
<div id="org_tree"></div>
</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');
});可用方法清单
以上是官方简单 示例代码。
实现与SpringBoot交互获取数据
html页面代码
<div class="row">
<div class="col-lg-12">
<div class="ibox ">
<div class="ibox-title">
<h5>架构管理页面</h5>
<div class="col-sm-2">
<div class="form-group">
<label class="col-form-label" for="IsOpened">是否启用</label>
<select class="form-control" id="IsOpened" name="IsOpened" >
<option value="1">是</option>
<option value="2">全部</option>
</select>
</div>
</div>
<button class="btn btn-info " type="button" onclick="orgSearch()"><i class="fa fa-refresh"></i>搜索</button>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-lg-3">
<h5>架构管理</h5>
<div id="org_tree"></div>
</div>
<div class="col-lg-9">
<ul class="sortable-list connectList agile-list ui-sortable">
<li class="success-element ui-sortable-handle ">
<h5>架构详情</h5>
<P>
<button class="btn btn-info " type="button" data-toggle="modal" onclick="orgAdd()"><i class="fa fa-save"></i> 新增</button>
<button class="btn btn-info " type="button" onclick="orgEdit()"><i class="fa fa-paste"></i> 编辑</button>
<button class="btn btn-info " type="button" onclick="orgOpen()"><i class="fa fa-trash-o"></i>启用</button>
<button class="btn btn-info " type="button" onclick="orgClose()"><i class="fa fa-trash-o"></i>禁用</button>
<button class="btn btn-info " type="button" onclick="orgRefresh()"><i class="fa fa-refresh"></i> 刷新</button>
</P>
<div class="project-list">
<table class="table table-hover" id="orgDetailDisplay">
<tbody>
<tr>
<td class="project-status w-10">
<span class="label label-primary">架构编号</span>
</td>
<td class="project-title">
<span id="num">--</span>
</td>
</tr>
<tr>
<td class="project-status w-10">
<span class="label label-primary">架构名称</span>
</td>
<td class="project-title">
<span id="text">--</span>
</td>
</tr>
<tr>
<td class="project-status w-10">
<span class="label label-primary">架构图标</span>
</td>
<td class="project-title">
<span id="icon">--</span>
</td>
</tr>
<tr>
<td class="project-status w-10">
<span class="label label-primary">分类</span>
</td>
<td class="project-title">
<span id="orgClassify">--</span>
</td>
</tr>
<tr>
<td class="project-status w-10">
<span class="label label-primary">是否启用</span>
</td>
<td class="project-title">
<span id="opened">--</span>
</td>
</tr>
<tr>
<td class="project-status w-10">
<span class="label label-primary">是否失效</span>
</td>
<td class="project-title">
<span id="disabled">--</span>
</td>
</tr>
<tr>
<td class="project-status w-10">
<span class="label label-primary">是否选中</span>
</td>
<td class="project-title">
<span id="selected">--</span>
</td>
</tr>
<tr>
<td class="project-status w-10">
<span class="label label-primary">是否顶级</span>
</td>
<td class="project-title">
<span id="isTopLevel">--</span>
</td>
</tr>
<tr>
<td class="project-status w-10">
<span class="label label-primary">备注</span>
</td>
<td class="project-title">
<span id="remark">--</span>
</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>注：
页面布局是左边是一个jstree的容器
<div id="org_tree"></div>然后右边是点击具体某一个节点时显示的详情显示
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('<i class="'+res.data.icon+' modal-icon pr-1"></i>'+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('<i class="'+res.data.icon+' modal-icon pr-1"></i>'+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<SysEnterpriseOrg> sysEnterpriseOrgIPage = page(new Page<SysEnterpriseOrg>(0, 1), new QueryWrapper<SysEnterpriseOrg>().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<TreeJsonVO> treeVOList = new ArrayList<TreeJsonVO>();
//查询启用的
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部分
<!--查询全部的-->
<select id="listOrgJsTree" resultMap="menuMap">
SELECT
id,
ISNULL(
CAST (
pid AS VARCHAR ( 50 )),
CAST (
'#' AS VARCHAR ( 50 ))) parent,
icon,
text,
num,
org_classify,
is_top_level,
CASE
WHEN id =#{selectedId} THEN
1 ELSE 0
END selected,
opened,
disabled,
creator,
modifier
FROM
sys_enterprise_org
WHERE
is_delete = 0
ORDER BY
id ASC
</select>
<!--查询启用的-->
<select id="listOrgJsTreeOpened" resultMap="menuMap">
SELECT
id,
ISNULL(
CAST (
pid AS VARCHAR ( 50 )),
CAST (
'#' AS VARCHAR ( 50 ))) parent,
icon,
text,
num,
org_classify,
is_top_level,
CASE
WHEN id =#{selectedId} THEN
1 ELSE 0
END selected,
opened,
disabled,
creator,
modifier
FROM
sys_enterprise_org
WHERE
is_delete = 0 and opened = 1
ORDER BY
id ASC
</select>数据库设计
根据每条记录的pid（负极节点ID）字段来区分分支关系。
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
