通过延迟加载扩展fancyTree

时间:2018-01-11 18:29:59

标签: javascript lazy-loading fancytree

我已经设置了我的fancytree通过延迟加载打开,它运行得非常好。

$("#tree").fancytree({
        selectMode: 1, quicksearch:true, minExpandLevel:2,
        autoScroll: true,
        source: [{
            title: "Root",
            key: "1",
            lazy: true,
            folder: true
        }],
        lazyLoad: function(event, data) {
            var node = data.node;
            data.result = {
                url: "getTreeData.jsp?parent=" + node.key,
                data: {
                    mode: "children",
                    parent: node.key
                },
                cache: false
            };
        }


    });

但是,如果用户之前在树上选择了一个点,我希望树可以打开到那一点。 我有一个名为层次结构的变量,看起来像" 1/5/10/11/200"并保持键的顺序到那一点。

以下工作:

$("#tree").fancytree("getTree").getNodeByKey("1").setExpanded();
$("#tree").fancytree("getTree").getNodeByKey("5").setExpanded();
$("#tree").fancytree("getTree").getNodeByKey("10").setExpanded();
$("#tree").fancytree("getTree").getNodeByKey("11").setExpanded();
$("#tree").fancytree("getTree").getNodeByKey("200").setExpanded();

显然,它之所以不起作用,是因为在一个陈述和下一个陈述之间需要有一些延迟。

以下代码有效,但在我看来它很混乱:

function openNode(item) {

   $("#tree").fancytree("getTree").getNodeByKey(String(item)).setExpanded();
}

function expandTree(hierarchy) {
  var i=0;
  hierarchy.split("/").forEach(function (item) {
  if (item!="") {
     i++;
     window.setTimeout(openNode, i*100,item);
  }
});

是否有更简洁的方式打开树上的特定点?

1 个答案:

答案 0 :(得分:0)

以下代码似乎可以解决问题。

改编自

http://wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree.html#loadKeyPath

function expandTree(hierarchy) {
    $('#tree').fancytree("getTree").loadKeyPath(hierarchy).progress(function(data) {
        if (data.status === "loaded") {
            console.log("loaded intermediate node " + data.node);
            $('#tree').fancytree("getTree").activateKey(data.node.key);
        } else if (data.status === "ok") {}
    }).done(function() {});
}