0

我一直在使用 Martin Wendt 编写的Fancytree jQuery 插件，它很棒。但是，我一直在努力解决一个特定的方面。我使用 HTML 而不是 JSON 作为树的数据结构，并发现它呈现时缺少节点。

我花了相当多的时间将其缩小到 Fancytree 控件必须期待一个单一的<UL>结构这一事实。结构中的任何其他内容都必须嵌套在<LI>. 但是我不明白为什么。让我解释。

这是一些示例 HTML：

<div id="tree">
   <UL id="browser" class="filetree">
      <LI class="folder">
         Folder 1
         <UL>
            <LI>Nested Folder 1
               <UL>
                  <LI>Subitem1</LI>
                  <LI>Subitem2</LI>
               </UL>
            </LI>
         </UL>
         <UL>
            <LI>Nested Folder 2
               <UL>
                  <LI>Subitem1</LI>
                  <LI>Subitem2</LI>
               </UL>
            </LI>
        </UL>
      </LI>
   </UL>
</div>

当这个 HTML 在 IE、Chrome 或几乎任何浏览器中呈现时，它正确地显示为两个带有嵌套项的连续无序列表。但是，当我应用 Fancytree 时，节点“嵌套文件夹 2”完全消失了。事实上，插件框架没有 JavaScript 错误或警告。

因此，我的问题有两个方面：

  1. 基于 W3C 标准的上述 HTML 语法格式是否正确？我想是的。

  2. 为什么 Fancytree 不呈现第二个文件夹？这是 Fancytree 的错误吗？我可以轻松地进行自定义以使其呈现吗？

我的这个 HTML 源是动态的，并且涉及到一个相当复杂的 XSLT，所以我希望答案是不必重构 HTML 结构。

我将不胜感激任何可以提供的见解。

4

1 回答 1

0

在继续努力推进之后，我能够回答我自己的问题。

多个<UL>元素

一行中多个 <UL>元素的 HTML 语法确实是完全有效的。但是，当数据以这种格式结构化时，第二个无序列表真正成为它自己的实体。该结构的重点是构建可以完全表示为单个树结构的东西，因此包含单个根元素<UL>和子节点。当然，子节点可能还有其他子节点，它们成为<UL>带有列表项的嵌套无序列表<LI>。

这是一个例子：

  • 测试
  • 另一个测试

FancyTree jQuery 插件

FancyTree 根据上述答案设计以这种方式工作。

在调整 XSLT 以调用<UL>容器中的各个模板时，每个 XSL 模板都会根据需要正确添加它自己的列表项。最终结果是代表 HTML 数据结构的树视图。

还曝光的一件事是 XSLT 必须在呈现节点之前执行逻辑检查。原因是如果模板没有任何列表项要添加到结构中，则创建空<UL>的会导致树视图渲染出错。在这种情况下，它会导致树节点成为错误父元素的子节点。

于 2014-04-01T18:55:02.350 回答