JS Tree使用详解

发布时间：2023-05-20

一、什么是jstree

jstree是一个基于jQuery的、轻量级的、可定制的、实用的树结构插件，支持多种数据源和多种节点类型。它可以帮助开发人员快速创建各种功能强大的树结构。

二、如何使用jstree

1、在HTML文件中添加引用jQuery和jstree的js和css文件：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>jstree Demo</title>
  <!-- 引入 jQuery 的js文件-->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- 引入 jstree 的js、css文件-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
 </head>
 <body>
 </body>
</html>

2、在<body>标签中添加一个用于显示jstree的HTML元素：

<div id="tree"></div>

3、通过jQuery的语法进行初始化和配置：

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

三、如何加载数据源

1、在初始化的过程中可以通过对tree的配置项进行设置来加载数据源，例如：

$(function () {
    $('#tree').jstree({
        'core' : {
            'data' : [
                'Simple root node',
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1' },
                        'Child 2'
                    ]
                }
            ]
        }
    });
});

2、也可以通过ajax来加载数据源，例如：

$(function () {
    $('#tree').jstree({
        'core' : {
            'data' : {
                'url' : 'ajax_data.json',
                'dataType' : 'json'
            }
        }
    });
});

四、如何处理事件

在jstree中，可以处理多种事件，例如，常见的click、dblclick、changed、select_node等事件。例如：

$(function () {
    $('#tree').jstree({
        'core' : {
            'data' : [
                'Simple root node',
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1' },
                        'Child 2'
                    ]
                }
            ]
        }
    })
    .on('changed.jstree', function (e, data) {
        console.log(data.selected);
    });
});

五、如何自定义节点类型

在jstree中，可以通过自定义节点类型的方式，来实现根据不同的节点类型来使用不同的样式和行为。例如，可以通过以下方式添加一个“文件”节点类型，并进行自定义：

$(function () {
    $.jstree.defaults.types["file"] = {
        'icon' : 'glyphicon glyphicon-file',
        'max_children' : 0,
        'max_depth' : 1,
        'valid_children' : []
    };
    
    $('#tree').jstree({
        'core' : {
            'data' : [
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1', 'type': 'file' },
                        { 'text' : 'Child 2' }
                    ]
                }
            ]
        }
    });
});

六、如何控制节点

在jstree中，可以对节点的行为和属性进行控制。例如，在以下的示例中，通过控制节点，仅允许“文件”类型的节点进行拖拽和重命名：

$(function () {
    $.jstree.defaults.types["file"] = {
        'icon' : 'glyphicon glyphicon-file',
        'max_children' : 0,
        'max_depth' : 1,
        'valid_children' : []
    };
    
    $('#tree').jstree({
        'core' : {
            'data' : [
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1', 'type': 'file' },
                        { 'text' : 'Child 2' }
                    ]
                }
            ]
        },
        'types' : {
            "file" : {
                "valid_children" : [ ]
            }
        },
        'plugins' : ['types','dnd','contextmenu']
    });
});

七、如何使用插件

jstree提供了各种各样的插件，可以帮助我们实现更复杂的功能，例如，contextmenu、dnd、checkbox等插件。下面以checkbox插件为例：

$(function () {
    $.jstree.defaults.types["file"] = {
        'icon' : 'glyphicon glyphicon-file',
        'max_children' : 0,
        'max_depth' : 1,
        'valid_children' : []
    };
    
    $('#tree').jstree({
        'core' : {
            'data' : [
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1', 'type': 'file' },
                        { 'text' : 'Child 2' }
                    ]
                }
            ]
        },
        'types' : {
            "file" : {
                "valid_children" : [ ]
            }
        },
        'checkbox' : {
            'tie_selection' : false
        },
        'plugins' : ['types','dnd','contextmenu', 'checkbox']
    });
});
推荐文章