jstree树形结构的使用

最新推荐文章于 2024-01-14 07:45:00 发布
最新推荐文章于 2024-01-14 07:45:00 发布
阅读量4.4k 收藏 1
点赞数
分类专栏： 前端 文章标签： jstree
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h2604396739/article/details/93483066
版权

 

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">

<div id="pdailog" style="display:none;" >
    <div id="tree"  >
        <input type="text" value="" class="bi-ipt" id="organ_name" style="width: 300px"  placeholder="请输入组织名称或用户名称进行模糊搜索">
        <div id="treecontents"></div>
        <div>
            <button id="pdailog-cancel" class="btn btn-slight">确认</button>
        </div>
    </div>
</div>
 <input type="hidden" id="treecontent"  name="treecontent" value="<c:out value="${treecontent}"></c:out>"/>

<script language="javascript">
    $(function(){
        // 树形结构的初始化
        var tree = $("#treecontent").val();
        var obj = JSON.parse(tree); //由JSON字符串转换为JSON对象
        $("#treecontents").jstree(obj);

        $('#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>

效果如下图：

深山猿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js生成树形结构.html
10-26
原生javascript生成树形结构，采用非递归形式，效率和性能高，可以生成 数组和对象两种树形结构，顶层父级可以有多个，通用性强。
jstree动态创建节点
往前的娘娘
09-16 9422
概述：一般数据都是不是死的我们需要动态的创建节点，具体引用jstree文件入门参考：http://blog.csdn.net/m0_37355951/article/details/75257556 1、html标签： 2、js文件 $(function () { $('#jstree').jstree({ 'plugins': ["checkbox
jstree v1.0 实现树形结构
03-24
NULL 博文链接：https://zhanglun1225.iteye.com/blog/1114551
使用jsTree实现js树形结构
06-07
例程可正常使用，非常的简单，基本上学过几天代码的人都能够正常使用。采用纯js编写，不复杂
Vue.js组件tree实现无限级树形菜单
10-20
主要为大家详细介绍了Vue.js组件tree实现无限级树形菜单代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
tree.js树形JS实现
03-30
tree.jstree.jstree.jstree.jstree.jstree.jstree.js
jsTree 组件官方文档学习
belusoi的博客
09-13 5705
个人对于jsTree组件官方文档的学习笔记
JSTree的简单使用
HongRi_的博客
04-02 7715
jstree是一个前端插件，可以动态生成树状图， 详细操作内容请点击官网链接跳转查看 jstree的使用 引入jstree的js和css文件，因为jstree是jquery写的，所以要引入jquery，引入的方法有两种，一种是引入外部，一种是引入本地的。 引入外部如果需要不同版本就去改站去cv <-- 引入外部 --> <link rel="stylesheet" h...
【JavaScript】jstree使用以及本地化
sunriver2000的专栏
09-30 411
jstree 是一个基于 jQuery 的强大的树形结构插件，用于在网页中创建交互式的树形视图。它提供了丰富的功能和灵活的配置选项，可以用于展示层级结构的数据，例如文件系统、组织结构、导航菜单等。
tree.js初体验 | 大帅老猿threejs特训
qq_39094860的博客
01-13 4858
之前对Web3D并不了解，最近跟着大帅的训练营，通过三天的学习，了解了blender的操作和three.js。下面就用几十行js代码实现一个带动态效果的甜甜圈。
BootStrap Jstree 树形菜单的增删改查的实现
10-20
主要介绍了BootStrap Jstree 树形菜单的增删改查的实现源码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
JavaScript创建与遍历二叉树
wuxian_wj的博客
12-22 1678
二叉树可以算得上是数据结构和算法的必学项，很多关于树的算法题给的输入直接就是树结构，关于怎么构建一颗二叉树很多关于数据结构的树都说烂了。但是大都是基于c语言讲的，这里主要是想总结一下前端人都在用的JavaScript怎么来构建一颗二叉树。 本文章是基于对象结构构建的二叉树，大致的结构也很简单，二叉树的每个节点无非就是三个属性值val、left、right分别代表节点值，左孩子，右孩子。为什么考虑用对象结构在实现二叉树构建而不是数组结构呢？其实是写这个构建之前考虑到树各个节点之前是通过地址连接的，数组是一个连
网页显示简单的静态树，利用jquery 的插件jstree
very home
04-01 1679
利用了jquery 插件 jstree， 下载插件：http://www.jstree.com/ 下面的代码基本就是jstree文档里的一个简单例子，只不过这里给出了完整的html代码，测试的话只需要把这些代码拷贝到一个新建的html文档里，从浏览器打开就可以看到树了。比较合适入门找感觉，更复杂的树定制就需要看网站的文档了，他的文档还是很全的。 =============html代码=============== "> Tree Demo MyTree
JsTree 最详细教程及完整实例
yiding123的专栏
12-16 7467
JsTree 最详细教程及完整实例 JsTree是一个jquery的插件，它提交一个非常友好并且强大的交互性的树，并且是完全免费或开源的（MIT 许可）。Jstree技持Html 或 json格式的的数据， 或者是ajax方式的动态请求加载数据。 1、支持基于HTML定义、Json、XML方式加载树节点     2、支持拖放，动态增加、删除、重命名树节点     3、支持复选框   ...
js(JavaScript)数据结构之树（Tree）
最新发布
星辰迷上大海的博客
01-14 1470
树（Tree）是一种常见的数据结构，由节点（Node）和边（Edge）组成。树的节点通过边连接，形成层次结构。树的一个节点可以有多个子节点，但只有一个父节点（除了根节点）。树的一个重要特点是没有环，即任意两个节点之间都有唯一的路径。
js数据结构之树（tree）
Luckyzhoufangbing的博客
06-29 832
典型的：HTML 就是一个树结构 （一）二叉树 特点： 1. 每一个父结点都有两个子结点 2. 左侧子节点存储比父结点小的值，右侧子节点存储比父结点大的值 操作：增删改查 代码： // 定义Node节点 class Node { constructor (value) { this.value = value, this.left = null, this.right = null } }
jsTree工作笔记001---jsTree的基本使用_js实现树形结构
添柴程序猿的专栏
09-27 855
技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】：170933152 判断用户有没有选中节点: var treeown = $('#tree_' + own).jstree(true);//获得整个树 if (treeown) { var selectednode = _getCurrNode(own); if (selectednode) ...
jsTree手册
weixin_38673922的博客
02-08 555
jsTree手册
jsTree的使用
Benxiaohai_311的博客
06-06 1174
jsTree 是一个 jQuery 插件, 提供交互式树.它是完全免费的,开源的，并根据 MIT 许可进行分发，jsTree 易于扩展，可定义和配置，它支持 HTML 和 JSON 数据源以及 AJAX 加载。
js tree - 树形菜单插件
10-29
Js tree是一款强大的树形菜单插件。它基于JavaScript开发，可以帮助我们轻松地创建和管理树状结构的菜单。这个插件提供了丰富的功能和选项，可以满足不同项目的需求。 首先，Js tree具有良好的扩展性，允许我们根据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值