引入jsTree的文件jstree.min.js

        <div class="ibox-content">

            <div id="using_json"></div>

        </div>
前端页面

最佳方式

<script src="/static/js/plugins/jsTree/jstree.min.js"></script>
  $("#using_json").jstree({
    core:{
      data:{
        url:"menu_tree",
        dataFilter:function(data){
        var json = JSON.parse(data);
        return json;
         }
       },
        strings: {
       'Loading ...' : '正在加载...'
        }
        }
    });

执行JavaScript事件进行重载(添加,删除,修改等)

$("#addmenu").submit(function () {
    var data=$(this).serialize();
    $.ajax({
      url: 'menu_tree',
      data: "" ,
      type: 'POST',
      dataType: 'json', 
      success: function(json) {
      $("#using_json").jstree(true).settings.core.data = json;
      $("#using_json").jstree(true).refresh();
           }
       })

});

效果图
菜单导航

要注意一点的是:父和子的Id值不能一样否则会出点击展开 所有东西消失

Last modification:January 9, 2020
如果觉得我的文章对你有用,请随意赞赏