jstree的基本使用

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jstree@3.3.12/dist/themes/default/style.css">

    <script src="https://cdn.jsdelivr.net/npm/jstree@3.3.12/dist/jstree.min.js"></script>

html

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

    <script>
        $('#checkbox-tree').jstree({
            'core': {
                'themes': {
                    'responsive': false
                },
                'data': [
                    {
                        "text": "Project",
                        "state": {"opened": true},
                        "icon": "mdi mdi-folder-outline",
                        "children": [
                            {
                                "text": "Assets",
                                "state": {"opened": false},
                                "icon": "mdi mdi-folder-outline",
                                "children": [
                                    {"text": "CSS", "state": {"opened": true}, "icon": "mdi mdi-file-outline"},
                                    {"text": "JS", "icon": "mdi mdi-file-outline"},
                                    {"text": "Fonts", "icon": "mdi mdi-file-outline"},
                                    {"text": "Images", "icon": "mdi mdi-file-outline"},
                                    {
                                        "text": "Plugins",
                                        "state": {"opened": true},
                                        "icon": "mdi mdi-folder-outline",
                                        "children": [
                                            {"text": "jQuery", "icon": "mdi mdi-file-outline"},
                                            {
                                                "text": "Bootstrap",
                                                "state": {"selected": true, "opened": true},
                                                "icon": "mdi mdi-file-outline"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "text": "Icons",
                                "icon": "mdi mdi-opacity"
                            },
                            {
                                "text": "Events",
                                "icon": "mdi mdi-calendar"
                            },
                            {
                                "text": "UI Kits",
                                "state": {"opened": true},
                                "icon": "mdi mdi-package-variant-closed",
                                "children": [
                                    {"text": "Buttons", "icon": "mdi mdi-file-outline"},
                                    {"text": "Badges", "icon": "mdi mdi-file-outline"}
                                ]
                            },
                            {
                                "text": "Forms",
                                "icon": "mdi mdi-file-document"
                            },
                            {
                                "text": "Charts",
                                "icon": "mdi mdi-chart-pie"
                            },
                            {
                                "text": "Pages",
                                "state": {"opened": false},
                                "icon": "mdi mdi-book-open-variant",
                                "children": [
                                    {"text": "Coming Soon", "icon": "mdi mdi-file-outline"},
                                    {"text": "Maintenance", "icon": "mdi mdi-file-outline"}
                                ]
                            },
                            {
                                "text": "Tables",
                                "icon": "mdi mdi-table"
                            },
                        ]
                    },
                    {
                        "text": "Documents",
                        "state": {"selected": true},
                        "icon": "mdi mdi-folder-outline"
                    }
                ]
            },
            'plugins': ['types', 'checkbox']
        });


        $('#checkbox-tree').bind("activate_node.jstree", function (obj, e) {
            // 处理代码
            // 获取当前节点
            var currentNode = e.node;

            console.log(currentNode);

        });

    </script>