使用jsTree延迟加载
我试图在扩展时动态加载jtree的节点。 我找到的小文档在本页末尾。
我找到了一些解决方案，用这个循环逐个创建节点。 我没有尝试过，但是看一下文档页面，我觉得jstree应该在节点中循环。
我找到了很多使用plugins: ["json_data"]解决方案plugins: ["json_data"] ，但插件文档页面根本没有提到插件。 这是一个不再需要的旧插件吗？
我当前的实现使用此代码一次性加载整个树：
$.ajax({ var pn = $('#project_number').val(); url : "bomtree?part=" + pn, success : function(tree_content) { var data = $.parseJSON(tree_content); var config = { 'core' : { 'data' : data } }; $('#bom_tree').jstree(config); } });
我修改了文档页面上的代码，如下所示：
$(function() { var pn = $('#project_number').val(); $('#tree').jstree({ 'core' : { 'data' : { 'url' : function(node) { return '/doc/test2'; }, 'data' : function(node) { return { 'part' : node.id === '#' ? pn : node.id }; } } } }); });
相同的json文本与第一个代码一起使用，现在与第二个代码一起使用。 文档说The format remains the same as the above ，所以我没有改变它。
我还尝试返回与示例中相同的数据，这个：
[ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ]
但结果是一样的：jquery在以下行抛出一个Sizzle.error：
Sizzle.error = function( msg ) { throw new Error( "Syntax error, unrecognized expression: " + msg ); };
其中msg的内容是服务器返回的json数据。
怎么了？
“当使用AJAX时，将子集设置为布尔值true，并且jsTree会将节点呈现为已关闭，并在用户打开该节点时对该节点发出其他请求。” ，这是来自jstree文档，它可以满足您的要求。
我会告诉你文档/示例非常粗糙。 我还要补充一点，你的困惑的来源是一次重大升级 – 旧版本与新版本没有多少共同点，不幸的是大多数例子是针对那个旧版本编写的。
好消息是开箱即用支持延迟加载，它就不那么明显了。 关键是它会在扩展每个节点时调用您的data: config。 但为了使其工作，URL函数必须为给定节点返回不同的URL。 在下面的代码中，请注意如果节点是root（ # ）则返回一个URL的条件，如果不是，则返回另一个URL。
$('#TreeDiv') .jstree({ core: { data: { url: function (node) { return node.id === '#' ? '/UserAccount/AccountGroupPermissions' : '/UserAccount/AccountPermissions/' + node.id; }, type: 'POST' } }, plugins : ["checkbox"] });
使用（非常简约的）示例扩展Nathans答案：具有延迟加载的演示树。
JS：
$('#the_tree').jstree({ 'core' : { 'data' : { 'url' : "tree/ajax.php", 'data' : function (node) { return { 'id' : node.id }; } } }, });
PHP：
header('Content-Type: application/json'); if ( $_GET["id"] === "#" ) { $data = array( array( "id" => "ajson1", "parent" => "#", "text" => "Simple root node" ), array( "id" => "ajson2", "parent" => "#", "text" => "Root node 2", "children" => true ), ); } else if ( $_GET["id"] === "ajson2" ) { $data = array( array( "id" => "ajson3", "parent" => "ajson2", "text" => "Child 1" ), array( "id" => "ajson4", "parent" => "ajson2", "text" => "Child 2" ) ); } echo json_encode( $data);
只有具有"children" : true节点"children" : true ，将在打开时生成对子节点的请求，其他节点将被视为叶子。
要进行延迟加载，您需要一个后端，该后端返回一个JSON对象，其树节点具有子属性字段。 Children属性必须包含子元素或布尔值true（数组或布尔值）。 在你的后端使用强类型语言它将是丑陋的，所以最好在前端处理它。 AJAX成功回调示例：
$('#tree').jstree({ 'core' : { 'data' : { 'url' : function(node) { return '/doc/test2'; }, 'data' : function(node) { return { 'part' : node.id === '#' ? pn : node.id }; }, 'success' : function(nodes) { var validateChildrenArray = function(node) { if (!node.children || node.children.length === 0) { node.children = true; } else { for (var i = 0; i < node.children.length; i++) { validateChildrenArray(node.children[i]); } } }; for (var i = 0; i < nodes.length; i++) { validateChildrenArray(nodes[i]); } } } } });
通过这样做，您将能够懒惰加载您的树。
我通过组合“select_node.jstree”事件和“create_node”方法来定制延迟加载。 在选择每个节点时，事件处理程序检查是否存在子节点，并逐节点地将服务器的响应添加到所选节点。 我的服务器响应与jstree的类似或要求不同，这种策略为我节省了大量的时间和精力。 希望它对某人有帮助。