BootStrap Jstree 树形菜单的增删改查的实现源码

最新推荐文章于 2025-07-07 14:07:25 发布

原创

最新推荐文章于 2025-07-07 14:07:25 发布 · 置顶 · 3.1w 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了如何利用BootStrap Jstree插件实现树形菜单的增删改查功能。首先，下载并引入jstree的JS和CSS文件，接着初始化插件，配置json_data和plugins参数。contextmenu参数允许在树形节点上显示右键菜单，提供增删改查操作。json数据结构用于动态加载菜单，通过递归方式组装无限级菜单。创建节点时，可以通过右键菜单触发AJAX请求，将新节点保存到数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先需下载jstree的插件点击打开链接

2.在页面引入插件js文件css文件

<link rel="stylesheet" href="plugins/jstree/themes/classic/style.css">
<script type="text/javascript" src="plugins/jstree/_lib/jquery.js"></script>
<script type="text/javascript"
	src="plugins/jstree/_lib/jquery.cookie.js"></script>
<script type="text/javascript"
	src="plugins/jstree/_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="plugins/jstree/jquery.jstree.js"></script>

3.初始化控件

1）html

<div id="demo2" class="demo" style="height:100px;"></div>

2）js 使用 demo2来初始化树形控件

<script type="text/javascript" class="source below">
    $(function() {
        $("#demo2").jstree(
            {
                "json_data" : {
                    "ajax" : {
                        "url" : "http://localhost:8080/MemberManager/DepartmentTreeJson",
                        "data" : function(n) {
                                    // the result is fed to the AJAX request `data` option
                                    return {
                                        "operation" : "get_children",
                                        "id" : n.attr ? n
                                            .attr(
                                            "id")
                                            .replace(
                                            "node_",
                                            "")
                                            : 1
                                    };
                                }
                            }
                        },

                "plugins" : [
                            "themes",
                            "json_data",

                            "ui",
                            "crrm",
                            "contextmenu",

                            "search" ],

                    })

            .bind("loaded.jstree",
                    function(event, data) {
                    })

            .bind(
                    "select_node.jstree",
                    function(event, data) {
                        if (data.rslt.obj
                                .attr("id") != undefined) {
                        }
                    })
            .bind(
                    "remove.jstree",
                    function(e, data) {
                        data.rslt.obj.each(function() {
                                $.ajax({
                                        async : false,
                                        type : 'POST',
                                        url : "http://localhost:8080/MemberManager/CreateNodeForDepartment",
                                        data : {
                                            "operation" : "remove_node",
                                            "id" : this.id.replace("node_", "")
                                        },
                                        success : function(r) {
                                            if (!r.status) {
                                                data.inst.refresh();
                                            }
                                        }
                                    });
                            });
                    })
            .bind(
                    "remove.jstree",
                    function(e, data) {
                        data.rslt.obj.each(function() {
                                $.ajax({
                                        async : false,
                                        type : 'POST',
                                        url : "http://localhost:8080/MemberManager/CreateNodeForDepartment",
                                        data : {
                                            "operation" : "remove_node",
                                            "id" : this.id
                                                .replace(
                                                "node_",
                                                "")