javascript - 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;
                    }
                }
            });

最佳答案

我发现了两种扩展所有树节点的方法。要选择所有节点，我只找到了一个。
在我的回答中，我将使用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

关于javascript - Fancytree已打开，默认情况下如何全部选择？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49558149/