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，这意味着您必须将该选项添加到每个可扩展的节点：

＆＃13;

$(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}
    ]
  });
});

＆＃13;

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

＆＃13;

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

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

选项2

初始化后使用额外的功能，以扩展和选择树中的所有节点：

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

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

＆＃13; 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是开放的，默认情况下如何选择？

1 个答案:

选项1

选项2