除非单击，否则不会填充 HTML

Question

我创建了一个很简单的fancytree对象，为了解释起见，它只有一个节点和4个孩子，只有一个级别，我不使用lazyLoad。

在运行时的代码中，我看到直到我不单击节点来展开它，孩子的 html 代码不存在，它位于 FancyTree lib 的 javascript init 部分。一旦节点打开或关闭，childern 的 html 就会有不同的 css 类来隐藏/显示它们。

我知道一旦加载树，我可以强制让节点可见，但我需要关闭它们，并且所有子节点都已填充到 html 中。 我想我可以解析所有节点并打开和关闭它们，但我想知道是否有更好的解决方案。

这里是一个简单的例子：

 SOURCE = [
    {title: "node 1", folder: true, expanded: true, children: [
      {title: "node 1.1", foo: "a"},
      {title: "node 1.2", foo: "b"}
     ]},
    {title: "node 2", folder: true, expanded: false, children: [
      {title: "node 2.1", foo: "c"},
      {title: "node 2.2", foo: "d"}
     ]}
  ];
    $("#tree").fancytree({
        clickFolderMode: 2,
        selectMode: 1,
        keyboard: false,
        source: SOURCE
    });

目前我想出了这个解决方法：

首先我打开所有节点：

var tree = $("#tree").fancytree("getTree");
tree.visit(function (node) {
    node.setExpanded(true);
});

然后我关闭它们：

  tree.visit(function (node) {
    node.setExpanded(false);
});

Answer 1

Fancytree 仅在需要时呈现 html 元素。 你可以使用

tree.render(true, true);

强制执行此操作。在此处查看details。