当前位置：首页 > JavaScript

js tree实现

2026-03-14 10:18:13JavaScript

jsTree 基础实现

jsTree 是一个基于 jQuery 的交互式树形插件，用于展示层次结构数据。以下是基础实现步骤：

安装依赖通过 npm 或直接引入 CDN 链接：

<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/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

HTML 容器

<div id="jstree_container"></div>

初始化基础树

$('#jstree_container').jstree({
    'core': {
        'data': [
            { "text": "Root node", "children": [
                { "text": "Child node 1" },
                { "text": "Child node 2" }
            ]}
        ]
    }
});

动态数据加载

通过 AJAX 加载远程数据：

$('#jstree_container').jstree({
    'core': {
        'data': {
            'url': '/api/tree_data',
            'dataType': 'json'
        }
    }
});

常用配置选项

多选模式

'checkbox': {
    'keep_selected_style': false,
    'three_state': false
}

节点图标自定义

'types': {
    'default': { 'icon': 'fa fa-folder' },
    'file': { 'icon': 'fa fa-file' }
}

事件处理

绑定节点选择事件

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

右键菜单示例

$('#jstree_container').jstree({
    'plugins': ['contextmenu'],
    'contextmenu': {
        'items': function(node) {
            return {
                'create': {
                    'label': 'Add Child',
                    'action': function() { /* 添加逻辑 */ }
                }
            };
        }
    }
});

实用方法

获取选中节点

var selected_nodes = $('#jstree_container').jstree('get_selected');

展开所有节点

$('#jstree_container').jstree('open_all');

主题定制

通过修改 CSS 覆盖默认样式：

.jstree-default .jstree-clicked {
    background: #e1e1e1;
    box-shadow: none;
}

性能优化

对于大型数据集启用懒加载：

'core': {
    'data': {
        'url': function(node) {
            return node.id === '#' ? '/api/roots' : '/api/children/' + node.id;
        }
    }
}

移动端适配

添加响应式 CSS 规则：

@media (max-width: 768px) {
    .jstree-container-ul { font-size: 14px; }
}

与框架集成

Vue 组件示例

js tree实现

export default {
    mounted() {
        $(this.$el).jstree({ /* 配置 */ });
    },
    beforeDestroy() {
        $(this.$el).jstree('destroy');
    }
}