jsTree的使用

最新推荐文章于 2024-09-05 10:02:59 发布

琪公子呀

最新推荐文章于 2024-09-05 10:02:59 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript jquery 开发语言 isTree 前端

本文链接：https://blog.csdn.net/benxiaohai_311/article/details/125141812

版权

JavaScript 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

本文介绍了如何使用jsTree这个免费且开源的jQuery插件来创建交互式的树形结构。jsTree支持HTML和JSON数据源，可配置且易于扩展，还提供了AJAX加载功能。文中给出了详细的引入文件、创建实例、监听事件以及与实例互动的代码示例，帮助读者快速上手。

摘要由CSDN通过智能技术生成

jsTree 是一个 jQuery 插件, 提供交互式树.它是完全免费的,开源的，并根据 MIT 许可进行分发，jsTree 易于扩展，可定义和配置，它支持 HTML 和 JSON 数据源以及 AJAX 加载。

中文文档列表：jsTree 核心功能 - jsTree 中文文档 - 文江博客
官网：https://www.jstree.com/
中文文档：https://www.wenjiangs.com/docs/jstree

步骤：

引入css文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

引入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>

body的主体代码：

<div id="jstree_demo_div">
   <ul>
      <li>根节点 1
         <ul>
             <li>子节点 1</li>
             <li><a href="#">子节点 2</a></li>
          </ul>
       </li>
   </ul>
</div>

创建一个实例：

$(function () { 
    $('#jstree_demo_div').jstree(); 
});

监听事件：

$('#jstree_demo_div').on("changed.jstree", function (e, data) {
   console.log(data.selected);    
});

与实例互动：

$('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');
});

总的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

</head>

<body>

    <div id="jstree_demo_div">
        <ul>
          <li>根节点 1
            <ul>
                <li>子节点 1</li>
                <li><a href="#">子节点 2</a></li>
              </ul>
          </li>
          <li>根节点 2</li>
        </ul>
    </div>

    <script>
        $(function () { 
            $('#jstree_demo_div').jstree(); 
        });

        $('#jstree_demo_div').on("changed.jstree", function (e, data) { 
            console.log(data.selected); 
        });

        $('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'); 
        });
    </script>

</body>

</html>

欢迎学习，一起进步！！！