JSTree 未显示在容器中答案

【问题标题】：JSTree not displaying in containerJSTree 未显示在容器中
【发布时间】：2018-06-19 14:40:01
【问题描述】：

我正在尝试将 JSTree 结构合并到我的 javascript 项目中；但是，树似乎没有在其父级container 中显示/渲染。这是我用来显示树的代码：

let tree=this.tree_div.find('#treeDiv');
    tree.jstree(
        {
            "json_data": 
            {
                "data": [
                    {
                        "data": "First",
                        "children": [{"data": "First"},{"data":"Second"},{"data": "Third"}]
                    },
                    {
                        "data": "Second",
                        "children": [{"data":"First"},{"data":"Second"},{"data": "Third"}]
                    },
                    {
                        "data": "Third",
                        "children": []
                    }

                ],
            },
            "plugins": ["checkbox","themes", "html_data", "ui"]

        }
    ).bind("select_node.jstree", function(e, data){});
    console.log(tree[0]);

在此示例中，#treeDiv 是父 container 包含的 div。

在打印树的值的最后一行，控制台中出现以下行：

据我了解，这意味着树已成功初始化和设置，但仍未显示在网页上。任何输入将不胜感激。谢谢。

【问题讨论】：

标签： javascript html jstree

【解决方案1】：

这里最合理的解释是您使用较旧的 jsTree API 初始化树，同时使用较新的 jsTree 库。

旧 JSON API：https://old.jstree.com/documentation/json_data

新的 JSON API：https://www.jstree.com/docs/json/

较新的 API 具有用于填充树的不同对象结构。一些功能和事件保持不变，但是包括配置对象在内的许多其他事情发生了变化。

myTree.jstree({ 'core' : {
    'data' : [
       'Simple root node',
       {
         'text' : 'Root node 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : 'Child 1' },
           'Child 2'
         ]
      }
    ]
} });

【讨论】：