使用jsTree延迟加载

Question

我试图在扩展时动态加载jtree的节点.我找到的小文档在本页末尾.

我找到了一些解决方案,创建节点逐个像一个循环这一个.我没有尝试过,但是看一下文档页面,我觉得jstree应该在节点中循环.

我找到了许多使用的解决方案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数据.

怎么了？

Answer 1

"当使用AJAX时,将子集设置为布尔值true,并且jsTree会将节点呈现为已关闭,并在用户打开该节点时对该节点发出额外请求." ,这是来自jstree文档,它可以满足您的要求.

Answer 2

我会告诉你文档/示例非常粗糙.我还要补充一点,你的困惑的来源来自一次重大的升级 - 旧版本与新版本没有多少共同点,不幸的是大多数例子是针对旧版本编写的.

好消息是开箱即用支持延迟加载,它不是那么明显.关键是它会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 属性字段的树节点。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]);
                }
            }
        }
    }
});

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