Нет никаких соединителей и значков для jQuery FancyTree

Я пытаюсь внедрить браузер веб-папок, используя плагин fancyTree jquery. После некоторых проблем с прорезями, у меня это работает неплохо. Единственная проблема заключается в том, что FancyTree не отображает никаких соединительных линий или значков. Строго текст, с + и - значками для разворота и сглаживания, соответственно. Я предположил, что такой плагин, ориентированный на файловую систему, имеет значки по умолчанию, например. закрытая и открытая папка и т.д., поэтому я еще не указал пользовательские значки, но линии соединителя беспокоят меня больше.

Я объединил свой источник FancyTree из своего репозитория GitHub, и моя исходная папка выглядит следующим образом. Это от выбора вишни источника, потому что папка dist для FancyTree немного разрежена:

введите описание изображения здесь

Вот как я ссылаюсь на стили и скрипты. Dev только для краткости:

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

<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, но, конечно же, это должно использовать значки стиля глификонов. Я не указал никаких пользовательских значков, но ожидал значения по умолчанию. Если я смогу запустить пользовательские значки, то моя настоящая проблема - отсутствие соединительных линий.

ЛОМАЯ: Если я вынужу connectrors для отображения в соответствии с этим этим SO-ответом, добавив класс сразу после запуска дерева:

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

Я получаю вертикальные части коннекторов по всему, но ничего не видно по горизонтали. , только текст, часто далеко отступы и менее читаемый, чем дерево с линиями.

Ответы

Ответ 1

Значки не отображаются, потому что вы пытаетесь использовать bootstrap, но вы не загрузили bootstrap css

Добавьте ссылку на boostrap.css перед файлом 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: ...,
    .
    .
    .
});

См. тему Bootstrap пример из браузера примеров Fancytree

Смотрите этот упрощенный пример

BTW

Вы можете переключиться на другой скин, который поддерживает коннекторы, ссылаясь на него:

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

Смотрите этот упрощенный пример (тема и коннекторы win8)