Fancytree 是打开的，默认情况下是如何选择的？

Question

我的 fancytree 如下所示。它是运行但我想添加一些功能，第一个页面加载所有复选框被选中并打开所有树。我该怎么做？

$("#definition-tree").fancytree({
                checkbox: true,
                selectMode: 3,
                icons: false,
                source: convertData(@Html.Raw(ViewBag.ResumeSettingDefinitions)),
                select: function (event, data) {
                    var selNodes = data.tree.getSelectedNodes();
                    var selKeys = $.map(selNodes,
                        function (node) {
                            return parseInt(node.key);
                        });
                    selectedResumeSettingDefinitionsId = selKeys;
                },
                click: function (event, data) {
                    if ($.ui.fancytree.getEventTargetType(event.originalEvent) == "title") {
                        data.node.toggleExpanded();
                        data.node.render();
                    }
                },
                keydown: function (event, data) {
                    if (event.which === 32) {
                        data.node.toggleSelected();
                        return false;
                    }
                }
            });

Answer 1

我找到了两种展开所有树节点的方法。 select 所有节点我只找到一个。
在我的回答中，我将使用 your jsfiddle-link.

中的代码

选项 1

在初始化期间在 per-node-basis 上使用 expanded:true，这意味着您必须将该选项添加到每个可扩展的节点：

$(function(){
  $("#tree").fancytree({
    checkbox: true,
    source: [
      {title:"Node 1"},
      {title:"Node 2"},
      {title:"Folder 3", folder:true, expanded:true, children: [
        {title:"Node 3.1"},
        {title:"Node 3.2"}
      ]},
      {title:"Folder 2", folder:true}
    ]
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/skin-win8/ui.fancytree.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>

<div id="tree"></div>

理论上这符合我的偏好，因为您不需要额外的功能来实现您的目标。这样做的缺点当然是你必须为每个可扩展节点添加选项，并且由于我在初始化期间没有找到 select 所有节点的选项，所以无论如何你仍然需要一个额外的功能.

考虑到这一点，我的实际偏好是选项 2。

选项 2

在初始化之后使用一个额外的函数，来扩展和select树中的所有节点：

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

$(function(){
  $("#tree").fancytree({
    checkbox: true,
    source: [
      {title:"Node 1"},
      {title:"Node 2"},
      {title:"Folder 3", folder:true, children: [
        {title:"Node 3.1"},
        {title:"Node 3.2"}
      ]},
      {title:"Folder 2", folder:true}
    ]
  });
  $("#tree").fancytree("getTree").visit(function(node) {
    node.setExpanded(true);
    node.setSelected(true);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/skin-win8/ui.fancytree.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>

<div id="tree"></div>

jsfiddle: http://jsfiddle.net/sturLzes/

来源：
https://github.com/mar10/fancytree
http://wwwendt.de/tech/fancytree/doc/jsdoc/
http://wwwendt.de/tech/fancytree/demo/sample-api.html
http://wwwendt.de/tech/fancytree/demo/sample-select.html

Fancytree 是打开的，默认情况下是如何选择的？

Fancytree is open and how are all selected by default?

javascript

fancytree

选项 1

选项 2