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
}]

然后我创建了花式树：

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

直到我实际上单击相应父级（东南，东北等）旁边的扩展器，我什至在DOM中也看不到第二级或第三级。在单击扩展器之前，“查看” DOM（检查器/控制台）中的层。任何想法如何做到这一点？我认为这与延迟加载有关，但是，我尝试了以下操作：

$('#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

懒惰的 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的延迟加载

1 个答案: