JavaScript — тема начальной загрузки FancyTree не применяется

Тема загрузки FancyTree не применяется

Я инициализировал FancyTree в классе. Вот что импортирует класс: Tree.js

 import fancytree from 'jquery.fancytree'; import 'jquery.fancytree/dist/modules/jquery.fancytree.edit'; import 'jquery.fancytree/dist/modules/jquery.fancytree.filter'; import 'jquery.fancytree/dist/modules/jquery.fancytree.dnd5'; import 'jquery.fancytree/dist/modules/jquery.fancytree.glyph'; import 'jquery.fancytree/dist/modules/jquery.fancytree.table'; import 'jquery.fancytree/dist/modules/jquery.fancytree.wide'; 

Я использую RollUp, поэтому импорт работает как положено. Тем не менее, я просто не могу найти решение для применения определенной темы, то есть bootstrap3 в моем дереве. index.html импорт

 {amp}lt;script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link href="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet"{amp}gt; {amp}lt;script src="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all-deps.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link rel="stylesheet" href="assets/css/icons.css" /{amp}gt; {amp}lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"{amp}gt; {amp}lt;link rel="stylesheet" href="./node_modules/jquery.fancytree/dist/skin-bootstrap/ui.fancytree.css"{amp}gt; {amp}lt;link href="./node_modules/jquery.fancytree/dist/skin-bootstrap/ui.fancytree.css" rel="stylesheet" class="skinswitcher"{amp}gt; 

И, наконец, инициализация FancyTree. Tree.js

 $('#explorer-tree').fancytree({ extensions: ['dnd5', 'edit', 'glyph', 'wide'], glyph: { preset: 'bootstrap3', map: { doc: 'fa fa-file-o', docOpen: 'fa fa-file-o', checkbox: 'fa fa-square-o', checkboxSelected: 'fa fa-check-square-o', checkboxUnknown: 'fa fa-square', dragHelper: 'fa arrow-right', dropMarker: 'fa long-arrow-right', error: 'fa fa-warning', expanderClosed: 'fa fa-caret-right', expanderLazy: 'fa fa-angle-right', expanderOpen: 'fa fa-caret-down', folder: 'fa fa-folder-o', folderOpen: 'fa fa-folder-open-o', loading: 'fa fa-spinner fa-pulse', }, }, icon: function(event, data) { // if( data.node.isFolder() ) { // return "glyphicon glyphicon-book"; // } }, source: [ {title: 'project-name', key: '1', expanded: true}, ], }); 

Дерево выглядит так же — по умолчанию. Нет стайлинга, нет ничего. Даже документация не объясняет, как это работает.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector