jstree树形结构的使用

1js和css的下载和引入

下载地址： http://www.jstree.com/，
api：https://www.jstree.com/api/#/?q=(
事件监听：https://www.jstree.com/api/#/?q=.jstree%20Event&f=deselect_all.jstree

翻译好的参考：https://blog.csdn.net/m0_37355951/article/details/75268296

https://blog.csdn.net/qq_24472595/article/details/70053863#%E6%8F%92%E4%BB%B6

下载后放到项目中
需要引入两个文件：
<script type="text/javascript" src="../resource/jstree/jstree.min.js"></script>
<link href="../resource/jstree/themes/default/style.min.css" rel="stylesheet">

2前端树形结构实例

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>详情</title><script type="text/javascript" src="../resource/js/bootstrap-select.min.js"></script><script type="text/javascript" src="../resource/jstree/jstree.min.js"></script><link href="../resource/jstree/themes/default/style.min.css" rel="stylesheet">
</head><script language="javascript">function openId(){//获取选中的节点var jstree = $("#using_json").jstree("get_checked");alert(jstree);$("#using_json").jstree(JSON.stringify($("#treecontent").val()));}$(function(){$("#using_json").jstree({"checkbox": {"keep_selected_style": false},"core": {"data": [{"icon": "none","id": 2,"state": {"opened": true,"selected": true},"text": "node2"}, {"children": [{"icon": "none","id": 1,"text": "node1"}],"icon": "none","id": 3,"text": "node3","state": {"opened": true,"selected": true},}]},"plugins": ["wholerow", "checkbox"]})});
</script><body style="background-color: #ffffff;">
<div><div id="using_json"></div><input type="button" value="打开选择的id" onclick="openId();"><input type="hidden" id="treecontent"  name="treecontent" value="${treecontent}"/>
</div>
</body></html>

点击按钮效果如下图：

3通过后台准备数据，并且形成树形结构的实例

拼接json需要的dto

public  class DtoService {public OrganTreeCoreDto getTreeDto() {OrganTreeDto organTreeDto = new OrganTreeDto();Checkbox checkbox = new Checkbox();checkbox.setKeep_selected_style(false);String[] pp = new String[2];pp[0]="wholerow";pp[1]="checkbox";TreeData treeData = new TreeData();List<OrganTreeNode> aa = new ArrayList<OrganTreeNode>();OrganTreeNode node2 = new OrganTreeNode();node2.setIcon("none");node2.setId(2);node2.setText("node2");NodeState state = new NodeState();state.setOpened(true);state.setSelected(true);node2.setState(state);aa.add(node2);OrganTreeNode node3 = new OrganTreeNode();node3.setIcon("none");node3.setId(3);node3.setText("node3");List<OrganTreeNode> node1child = new ArrayList<OrganTreeNode>();OrganTreeNode node1 = new OrganTreeNode();node1.setIcon("none");node1.setId(1);node1.setText("node1");node1child.add(node1);node3.setChildren(node1child);aa.add(node3);organTreeDto.setData(aa);OrganTreeCoreDto organTreeCoreDto = new OrganTreeCoreDto();organTreeCoreDto.setCore(organTreeDto);organTreeCoreDto.setPlugins(pp);organTreeCoreDto.setCheckbox(checkbox);String json = JSON.toJSONString(organTreeCoreDto);System.out.println(json);return organTreeCoreDto;}
}
public class OrganTreeCoreDto {private OrganTreeDto core;private Checkbox checkbox;private  String[] plugins;public OrganTreeDto getCore() {return core;}public void setCore(OrganTreeDto core) {this.core = core;}public Checkbox getCheckbox() {return checkbox;}public void setCheckbox(Checkbox checkbox) {this.checkbox = checkbox;}public String[] getPlugins() {return plugins;}public void setPlugins(String[] plugins) {this.plugins = plugins;}}public class Checkbox{boolean keep_selected_style;public boolean isKeep_selected_style() {return keep_selected_style;}public void setKeep_selected_style(boolean keep_selected_style) {this.keep_selected_style = keep_selected_style;}
}public class OrganTreeDto {private  List<OrganTreeNode> data;public List<OrganTreeNode> getData() {return data;}public void setData(List<OrganTreeNode> data) {this.data = data;}
}public   class OrganTreeNode {int id;String text;String icon;List<OrganTreeNode> children;NodeState state;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getText() {return text;}public void setText(String text) {this.text = text;}public String getIcon() {return icon;}public void setIcon(String icon) {this.icon = icon;}public List<OrganTreeNode> getChildren() {return children;}public void setChildren(List<OrganTreeNode> children) {this.children = children;}public NodeState getState() {return state;}public void setState(NodeState state) {this.state = state;}}public class NodeState{boolean opened;boolean selected;public boolean isOpened() {return opened;}public void setOpened(boolean opened) {this.opened = opened;}public boolean isSelected() {return selected;}public void setSelected(boolean selected) {this.selected = selected;}}public class TreeData{List<OrganTreeNode> data;public List<OrganTreeNode> getData() {return data;} public void setData(List<OrganTreeNode> data) {this.data = data;}}

controller中返回树对应的json

 @RequestMapping(value="/trees/testtree.action")public String testtree(ModelMap modelMap,ServletResponse response ){String s = JSON.toJSONString(new DtoService().getTreeDto());modelMap.put("treecontent", s);return "reportset/treetest";}

treetest.jsp页面中的处理:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>详情</title><link href="../resource/css/font-awesome.css?v=4.4.0" rel="stylesheet"><link href="../resource/sweetalert/sweetalert.css" rel="stylesheet"><link href="../resource/css/awesome-bootstrap-checkbox.css" rel="stylesheet"><script type="text/javascript" src="../fe-res/js/jquery.min.js"></script><script type="text/javascript" src="../fe-res/js/echarts.min.js"></script><script type="text/javascript" src="../resource/js/bootstrap.js"></script><script type="text/javascript" src="../resource/js/bootstrap.min.js"></script><script type="text/javascript" src="../resource/js/bootstrap-select.js"></script><script type="text/javascript" src="../resource/js/bootstrap-select.min.js"></script><script type="text/javascript" src="../resource/jstree/jstree.min.js"></script>
<link href="../resource/jstree/themes/default/style.min.css" rel="stylesheet">
</head><script language="javascript">function openId(){//获取选中的节点var nodes=$("#using_json").jstree("get_checked");alert(nodes);}$(function(){var tree = $("#treecontent").val();//由JSON字符串转换为JSON对象，才能展示成树形结构var obj = JSON.parse(tree);$("#using_json").jstree(obj);$('#using_json').on("changed.jstree", function (e, data) {console.log(data.selected);var nodes=$("#using_json").jstree("get_checked");alert(nodes);});});
</script><body style="background-color: #ffffff;">
<div><div id="using_json"></div><input type="button" value="打开选择的id" onclick="openId();"><!--注意因为返回的json中含有引号等，这里需要使用<c:out标签--><input type="hidden" id="treecontent"  name="treecontent" value="<c:out value="${treecontent}"></c:out>"/>
</div></body>
</html>

4 jsTree隐式组件的使用-以搜索为例

首先需要说明这个组件是隐式的，就是说只有你声明了，才能使用。
声明：就是在用json组装树形结构的时候，需要声明使用该插件
String[] pp = new String[3];
pp[0]="checkbox";
pp[1]="search";// 这里声明搜索的插件功能
pp[2]="wholerow";
organTreeCoreDto.setPlugins(pp);

Checkbox checkbox = new Checkbox();
checkbox.setKeep_selected_style(false);
organTreeCoreDto.setCheckbox(checkbox

2使用
controller内容
@RequestMapping(value="/reportset/testtree.action")
public String testtree(ModelMap modelMap,ServletResponse response ){
String s = JSON.toJSONString(treeService.getOrganTree());
modelMap.put("treecontent", s);
return "reportset/treetest-exp";
}

树形结构所在jsp页面
引入文件
<script type="text/javascript" src="../resource/jstree/jstree.min.js"></script>
<link href="../resource/jstree/themes/default/style.min.css" rel="stylesheet">

$('#treecontents').on("changed.jstree", function (e, data) {
console.log(data.selected);
var nodes=$("#treecontents").jstree("get_checked");
$("#organid").val(nodes);
});

// 输入框绑定搜索事件
$('#organ_name').keyup(function () {
var v = $('#organ_name').val();
$('#treecontents').jstree(true).search(v);
});

});
</script>

效果如下图：