JSTree 不显示在容器中
JSTree not displaying in container
我正在尝试将 JSTree 结构合并到我的 javascript 项目中;但是,这棵树在其父 container
中似乎不是 displaying/rendering。这是我用来显示树的代码:
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
。
在打印树值的最后一行,控制台中出现以下行:
据我了解,这意味着树已成功初始化和设置,但它仍未显示在网页上。任何输入将不胜感激。谢谢。
这里最合理的解释是您正在使用较旧的 jsTree API 初始化树,同时使用较新的 jsTree 库。
Old JSON API: https://old.jstree.com/documentation/json_data
New 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'
]
}
]
} });
我正在尝试将 JSTree 结构合并到我的 javascript 项目中;但是,这棵树在其父 container
中似乎不是 displaying/rendering。这是我用来显示树的代码:
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
。
在打印树值的最后一行,控制台中出现以下行:
据我了解,这意味着树已成功初始化和设置,但它仍未显示在网页上。任何输入将不胜感激。谢谢。
这里最合理的解释是您正在使用较旧的 jsTree API 初始化树,同时使用较新的 jsTree 库。
Old JSON API: https://old.jstree.com/documentation/json_data
New 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'
]
}
]
} });