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

本文主要是介绍使用jstree从后台获取数据在前台进行树状菜单展示（树状菜单 JsTree），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.css和js下载地址：https://www.jstree.com

2.把这几个文件拷贝到项目中

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

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

<div id="myJstree"></div>

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.获取数据的接口写法如下：

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

5.页面展示效果如下：

starry.每天进步一点点❤

这篇关于使用jstree从后台获取数据在前台进行树状菜单展示（树状菜单 JsTree）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---