javascript - 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

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

选项 1

在初始化期间在每个节点的基础上使用 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>

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

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

---

选项 2

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

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