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

Question

我创建一个fancytreeobject很简单，为了解释它只有一个节点和4个children，只有一个级别而且我没有使用lazyLoad。

在运行时的代码中我看到，直到我不点击节点展开它，children 的 html 代码不存在，它在 javascript FancyTree 库的初始化部分。一旦节点打开或关闭，孩子的 html 就在那里，显然 css class 到 hide/show 不同。

我知道我可以在加载树后强制让节点可见，但我需要关闭它们，并且所有 children 已经填充在 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.

见此处

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

HTML not populated unless clicked

html

jquery

fancytree