Question

我打算基于jquery的fancytree构建一个组件，但无论我对源数据做什么，文件夹深度都会停留在3。是否有一些特殊的树选项功能我无法发现哪些可以阻止限制？

提前致谢。凯文

我使用的代码是：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Fancytree - Example</title>
  <script src="../lib/jquery.js" type="text/javascript"></script>
  <script src="../lib/jquery-ui.custom.js" type="text/javascript"></script>
  <link href="../src/skin-xp/ui.fancytree.css" rel="stylesheet" type="text/css">
  <script src="../src/jquery.fancytree.js" type="text/javascript"></script>
  <script type="text/javascript">
   var DT = $.ui.fancytree;
  $.ui.fancytree.debug("Using fancytree " + $.ui.fancytree.version);
  $("#foldertree").fancytree({
   source: {
    url: "data.json"
  },
  lazyload: function(e, data){

    data.result = $.ajax({
      url: "data.json",
      dataType: "json"
    });
   }
  });
// call methods on multiple instances
 $("div:ui-fancytree").fancytree("foo", "after init");
 });
</script>
</head>
<body class="example">
<div id="foldertree" data-source="ajax" class="">
</div>
    <!-- (Irrelevant source removed.) -->
   </body>
</html>

我正在使用的数据样本（我已经多次更改）但是在下面添加了它以完成。我的观点是，我无法深入查看3个文件夹，无法在任何地方看到任何用于删除文件夹深度的树选项。

[
{"key": "top", "title": "Products", "folder": true, "children": [
    {"key": "under1", "title": "A-E", "folder": true, "children": [
        {"key": "under2", "title": "Parts 0-9", "folder": true ,          "children:": [
                {"key": "under3", "title": "F-M", "folder": true, "children": [
                  {"key": "under4", "title": "F-M", "folder": true, "children": [
                      {"key": "under5", "title": "F-M", "folder": true, "children": [
                          {"key": "under6", "title": "F-M", "folder": true, "children": [

                        ]}
                    ]}
                ]}
            ]}
        ]}
    ]}
]},
{"key": "11", "title": "Samples", "folder": true, "children": [
    {"key": "20", "title": "FG and H", "folder": true, "children": [
        {"key": "30", "title": "Parts 0-9", "folder": true , "children:": [
                {"key": "40", "title": "F-M", "folder": true, "children": [
                    {"key": "42", "title": "Sub-item 1.3.1", "folder": true, "children": [
                        {"key": "43", "title": "Sub-item 1.3.2"}
                    ]},
                    {"key": "44_1", "title": "Sub-item 1.3.2"}
            ]}
        ]}
    ]}
]}
]

Answer 1

这是我的数据。我从另一个例子中使用了一个json块，并添加了一个额外的文件夹深度，它工作正常，这在某种程度上表明在这种情况下没有限制器。我使用的数据如下。

[
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
    "children": [
        {"title": "Sub-item 2.1",
            "children": [
                        {"title": "Sub-item 2.1.1",
                            "children": [
                                        {"title": "Sub-item 2.1.1.1",
                                        "children": [
                                        {"title": "Sub-item 2.1.1.1.1"},
                                        {"title": "Sub-item 2.1.1.2.2"},
                                        {"title": "Sub-item 2.1.1.1.3"},
                                        {"title": "Sub-item 2.1.1.2.4"}
                                    ]

                                        },
                                        {"title": "Sub-item 2.1.2.2"},
                                        {"title": "Sub-item 2.1.1.3"},
                                        {"title": "Sub-item 2.1.2.4"}
                                    ]
                            },
                        {"title": "Sub-item 2.1.2"},
                        {"title": "Sub-item 2.1.3"},
                        {"title": "Sub-item 2.1.4"}
                    ]
            },
        {"title": "Sub-item 2.2"},
        {"title": "Sub-item 2.3 (lazy)", "isLazy": true }
    ]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
    "children": [
        {"title": "Sub-item 3.1",
            "children": [
                        {"title": "Sub-item 3.1.1"},
                        {"title": "Sub-item 3.1.2"},
                        {"title": "Sub-item 3.1.3"},
                        {"title": "Sub-item 3.1.4"}
                    ]
            },
        {"title": "Sub-item 3.2"},
        {"title": "Sub-item 3.3"},
        {"title": "Sub-item 3.4"}
    ]
},
{"title": "Lazy Folder 4", "isFolder": true, "isLazy": true, "key": "folder4"},
{"title": "Item 5"}

Answer 2

我正在使用Fancytree来加载大数据（大约23 MB），并且它可以在超过3个深度的情况下正常工作。我从您的示例和数据中注意到的一件事是您使用了lazyload选项，但并非所有数据都具有isLazy = true。试一试！

此外，您可能希望在延迟加载数据时检查树是否抛出错误。浏览器上的F12。

fancytree文件夹深度有限 - 有一个选项

2 个答案: