jsTree 入门教程与配置指南

2026-01-16 10:08:29作者：范垣楠Rhoda

1. 项目目录结构及介绍

当你克隆或下载 https://github.com/vakata/jstree.git 项目后，你会看到以下的基本目录结构：

jstree/
├── dist/          # 包含编译后的CSS样式和JavaScript库
│   ├── css/       # CSS样式文件
│   └── js/        # JavaScript文件和语言包
├── demo/          # 示例和演示页面
├── docs/          # 文档目录
└── src/           # 源代码，包括JavaScript、Less样式和模板文件

dist/: 包含用于生产环境的已编译资源。
demo/: 提供示例代码和互动演示，有助于理解如何使用jsTree。
docs/: 包含文档和API参考，帮助开发者深入学习。
src/: jsTree的核心源代码，包含了各个组件和功能。

2. 项目的启动文件介绍

jsTree 不像传统的Web应用程序那样有一个明确的启动文件，因为它是一个jQuery插件。通常，你需要在HTML页面中引入jQuery库和jsTree的JavaScript库，然后在jQuery的$(document).ready()函数内部初始化jstree：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jsTree示例</title>
    <!-- 引入css -->
    <link rel="stylesheet" href="dist/themes/default/style.css">

    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.x.y.min.js"></script>

    <!-- 引入jsTree -->
    <script src="dist/jstree.min.js"></script>
</head>
<body>
    <div id="my_tree"></div>

    <script>
        $(function () {
            $('#my_tree').jstree();
        });
    </script>
</body>
</html>

这段代码会在文档加载完毕后，将ID为my_tree的元素转变为一个jsTree交互式树。

3. 项目的配置文件介绍

jsTree 的配置是在初始化调用时通过一个JavaScript对象传递给jstree()方法的。这里有一个基本的配置示例：

$("#my_tree").jstree({
    'core': {
        'data': [
            { 'id': 'ajson1', 'text': 'Simple root node', 'state': {'opened': true} },
            { 'id': 'ajson2', 'text': 'Root node 2' }
        ]
    }
});

'core.data': 用来指定树的数据来源。在这个例子中，数据是以JSON格式直接写入配置的。
'core.state.opened': 控制根节点是否默认打开。

此外，还有许多其他配置选项，如插件启用、主题设置、事件监听等。更多配置详情，请参阅官方文档。

请记得替换x.y.z为你实际使用的jQuery版本号，并确保引入的路径正确。这只是一个基础配置介绍，实际使用中可以根据需求进行更复杂的定制。

jstree

jquery tree plugin

项目地址：https://gitcode.com/gh_mirrors/js/jstree

登录后查看全文