使用jstree从后台获取数据在前台进行树状菜单展示（树状菜单 JsTree）

布满荆棘的人生 2022-05-28 04:43 395阅读 0赞

###     ###

### **1.css和js下载地址：[https://www.jstree.com][https_www.jstree.com]** ###

### **[   ][https_www.jstree.com]2.把这几个文件拷贝到项目中** ###

**![70][]**

**![70 1][]**

### **3.页面引用，把css和js引到页面中** ###

**然后写个标签，用来存放你的树状菜单：**

### **4.开始写个js，从后台获取数据，然后进行展示；** ###

tzs = {};
    tzs.index = {
        //初始化页面 init: function () {
            tzs.index.doCreateTree();
        },
       //给标签绑定事件 event : function(){
       },
        doCreateTree : function(){
           $.getJSON("/user/queryJsTree",function(rs){
               $('#myJstree').jstree({
                    "core" : {
                        "mutiple" : false,
                        "check_callback" : true,
                        "data" : rs.data }
                });
            });
    
            //树节点左键相应函数（监听） $('#myJstree').on("select_node.jstree",function (node,selected,event) {
               //当前点击的对象的id alert(selected.node.id);
            })
        }
    };
    
    $(function(){
        tzs.index.init();
    });

### **5.获取数据的接口写法如下：** ###

**![70 2][]**

**注意：返回数据的对象需要有id，parent，text属性，用来区分他们的父亲是谁，我的jstreeVO是这样定义的：**

**![70 3][]**

### **5.页面展示效果如下：** ###

**![70 4][]**

**starry.每天进步一点点❤**

[https_www.jstree.com]: https://www.jstree.com/
[70]: /images/20220528/49fb9e0552c34775af4a22d1ef4a2b88.png
[70 1]: /images/20220528/5c9e2da983904b0bbe404fa1f87b9599.png
[70 2]: /images/20220528/694bb64947d341419c031e1a05d75932.png
[70 3]: /images/20220528/5b97df341f3646e08d6208c8baaa4dad.png
[70 4]: /images/20220528/662735d796a842289d0c99f9648d2b03.png