jQuery FancyTree 没有可见的连接器和图标答案

【问题标题】：No connectors nor icons visible for jQuery FancyTreejQuery FancyTree 没有可见的连接器和图标
【发布时间】：2017-10-11 05:04:11
【问题描述】：

我正在尝试使用 FancyTree jquery 插件实现基于 Web 的文件夹浏览器。在一些出牙问题之后，我让它工作得很好。唯一的问题是 FancyTree 不显示任何连接线或图标。仅纯文本，分别带有用于展开和折叠的 + 和 - 图标。我曾想象过这样一个面向文件系统的插件有默认图标，例如关闭和打开文件夹等，所以我还没有指定自定义图标，但连接线更困扰我。

我从它的 GitHub 存储库拼凑了我的 FancyTree 源，我的源文件夹如下所示。这是挑选源代码，因为 FancyTree 的 dist 文件夹有点稀疏：

这就是我引用样式和脚本的方式。开发人员只是为了简洁：

<link rel="stylesheet" href="~/css/site.css" />

<link href="~/lib/fancytree/jquery-ui.css" rel="stylesheet" />
<link href="~/lib/fancytree/jquery-ui.structure.css" rel="stylesheet" />
<link href="~/lib/fancytree/jquery-ui.theme.css" rel="stylesheet" />
<link href="~/lib/fancytree/skin-bootstrap/ui.fancytree.css" rel="stylesheet" />

额外的样式来自我最小的 jQuery UI 自定义下载，它是 FancyTree 的一个依赖项。脚本：

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/fancytree/jquery-ui.js"></script>
<script src="~/lib/fancytree/jquery.fancytree-all.js"></script>

我只是在想象一个丢失或错误的images 位置，但这肯定应该使用 glyphicons 样式的图标。我没有指定任何自定义图标，但预期的默认值。如果我可以让自定义图标正常工作，那么我真正担心的是缺少连接线。

突破：如果我强制连接器根据此this SO answer 显示，则在树启动后立即添加一个类：

$(".fancytree-container").addClass("fancytree-connectors");

我得到了所有连接器的垂直部分，但在水平方向上看不到任何东西。 , 只是文本，通常比带有线条的树更容易缩进且可读性差。

【问题讨论】：

你能用 codepen 或类似的方法重现这个问题吗？
@ProfK 你有机会检查答案吗？有帮助吗？干杯:)
@JaqenH'ghar 它帮助很好，但连接器不是我想要的，我想要更长的水平连接器，但这不在你的关注范围内。谢谢。

标签： jquery css fancytree

【解决方案1】：

图标不显示是因为你尝试使用引导皮肤但你没有加载引导 css

在皮肤css文件前添加对boostrap.css的引用：

<link href="~/path/to/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="~/lib/fancytree/skin-bootstrap/ui.fancytree.css" rel="stylesheet" />

除此之外，不要忘记在加载时添加这两个设置：

extensions - 指定你想使用glyph 扩展
glyph - 指定你想要的bootstrap3预设

类似：

$("#tree").fancytree({
    extensions: ["glyph"],
    glyph: {
        preset: "bootstrap3"
    },
    checkbox: true,
    source: ...,
    .
    .
    .
});

查看 Fancytree 示例浏览器中的 Bootstrap 主题 example

看到这个simplified example

顺便说一句

您可以通过引用它来切换到支持连接器的其他皮肤：

<!-- <link href="~/lib/fancytree/skin-bootstrap/ui.fancytree.css" rel="stylesheet" /> -->
<link href="~/lib/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet" />

并使用以下方法设置连接器：

$(".fancytree-container").addClass("fancytree-connectors");

在 Fancytree 示例浏览器的 example 中查看支持连接器的主题

查看simplified example（win8 主题和连接器）

【讨论】：