Question

我正在尝试在扩展时动态加载jtree的节点。我找到的小文档位于this page的末尾。

我找到了一些解决方案，用this one之类的循环逐个创建节点。我没有尝试过，但是看一下文档页面，我觉得jstree应该在节点中循环。

我找到了许多使用plugins: ["json_data"]的解决方案，但plugins documentation page根本没有提到该插件。这是一个不再需要的旧插件吗？

我当前的实现使用此代码一次性加载整个树：

$.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数据。

怎么了？

Answer 1

＆＃34;当使用AJAX时，将子集设置为布尔值true，并且jsTree会将节点呈现为已关闭，并在用户打开该节点时对该节点发出其他请求。＆＃34; ，这来自jstree文件，它可以满足您的要求。

Answer 2

我会告诉你文档/示例非常粗糙。我还要补充一点，您的混淆来自于重大升级 - old version与新版本没有多少共同之处，不幸的是，大多数示例都是根据旧版本编写的。< / p>

好消息是开箱即用支持延迟加载，它不是那么明显。关键是它会在每个节点扩展时调用您的data:配置。但为了使其工作，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"]
});

Answer 3

用一个（非常简约的）例子来扩展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的节点在打开时会生成对子节点的请求，其他节点将被视为叶子。

Answer 4

要进行延迟加载，您需要一个返回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]);
                }
            }
        }
    }
});

通过这样做，您将能够延迟加载树。

Answer 5

我通过组合＆＃34; select_node.jstree＆＃34;来制作我自定义的延迟加载。事件和＆＃34; create_node＆＃34;方法。在选择每个节点时，事件处理程序检查是否存在子节点，并逐节点地将服务器的响应添加到所选节点。我的服务器响应与jstree的类似或要求不同，这种策略为我节省了大量的时间和精力。希望它对某人有所帮助。

使用jsTree延迟加载

5 个答案: