禁用 FancyTree 的延迟加载

Question

我的应用程序通过 JSON 将整个树层次结构从 PHP 传递到 Javascript。没有 AJAX 调用，没有延迟加载。但是，我发现我实际上无法禁用列表扩展方法的延迟加载方面。

例如：

如果这是从我的 PHP 脚本传递的 json：

[{
    "title": "Southeast",
    "key": 28,
    "children": [{
        "key": 2,
        "title": "North Carolina",
        "children": [{
            "key": 68,
            "title": "Charlotte"
        }, {
            "key": 69,
            "title": "Raleigh"
        }]
    }, {
        "key": 1,
        "title": "South Carolina",
        "children": [{
            "key": 1,
            "title": "Columbia"
        }, {
            "key": 2,
            "title": "Baldwin County"
        }, {
            "key": 3,
            "title": "Barbour County"
        }, {
            "key": 4,
            "title": "Bibb County"
        }]
    }]
},
{
    "title": "Northeast",
    "key": 32,
    "children": [{
        "key": 3121,
        "title": "Albany County",
        "children": [{
            "key": 3121,
            "title": "Albany County"
        }, {
            "key": 3122,
            "title": "Big Horn County"
        }]
    }, {
        "key": 3122,
        "title": "Big Horn County"
    }]
},
{
    "title": "Midwest",
    "key": 167
},
{
    "title": "Mid-Atlantic",
    "key": 31
},
{
    "title": "Southwest",
    "key": 166
}]

然后我创建了 fancytree：

$('#tree').fancytree({
    source: 'php_script.php'
    extensions: ['edit']
});

我什至在 DOM 中也看不到第二或第三层，直到我实际单击相应父层（东南、东北等）旁边的扩展器。我想要什么能够做到的是 "see" DOM (inspector/console) 中的层，然后单击扩展器。知道怎么做吗？我认为这与延迟加载有关，但是，我尝试了以下方法：

$('#tree').fancytree({
...
lazyLoad: function(event, data) {
    return false; // I understand this is likely hack-ish, but it still didn't work
},

或者直接在每个节点上设置lazy 属性没有运气：

[{
"title": "Southeast",
"key": 28,
"lazy":false,
"children": [{
    "key": 2,
    "lazy":false,
    "title": "North Carolina",
    "children": [{
        "key": 68,
        "lazy":false,
        "title": "Charlotte"
    }, {
        "key": 69,
        "lazy":false,
        "title": "Raleigh"
    }]
}
...

我已经检查了节点以确保它们实际上不懒惰：

$('#tree').fancytree({
    'beforeExpand': function(event, data){
        console.log(data.node.isLazy());
    },
    'expand': function(event, data) {
        console.log(data.node.isLoaded());
    },
...

并且在控制台中，我收到了预期的结果：

false
true

我知道如果节点数量开始变得非常大，那么不延迟加载它们将开始减慢页面速度。我也明白我可以通过触发所有节点上的扩展来强制加载所有节点：

if(all) {
    $('#tree').fancytree('getTree').visit(function(node){
        node.setExpanded(expand);
    });
}

但感觉应该有更简单的方法来做到这一点。我想要整个 DOM 加载，但立即在 fancytree 实例化。有什么想法吗？

Answer 1

Lazy loading 将发出 Ajax 请求以在第一次展开时加载子节点（如果父节点标记为 lazy）。

你描述的是惰性渲染：完整的模型已经加载，但Fancytree按需生成DOM个元素。在大多数情况下，这会带来更好的用户体验，因为当 DOM 元素的数量增长太大时，浏览器往往会变慢。
concepts.

另见此处

但是，如果要在加载后渲染所有节点，请查看node.render()方法：

$("#tree").fancytree({
  source: "php_script.php",
  extensions: ["edit"]
  init: function(event, data) {
    data.tree.getRootNode().render(true, true);
  },
  ...
});

禁用 FancyTree 的延迟加载

Disable FancyTree's lazy load

javascript

fancytree