Question

我在班级里初始化了我的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 导入

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

最后，初始化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},
      ],
    });

树看起来一样-默认。没有应用样式，没有什么。甚至文档也没有真正解释它的工作原理。

Answer 1

由于FancyTree是通过非常隔离的方式制作的，因此应用自定义样式的唯一方法是首先不包括默认样式。我不得不重写css文件来调整它们，否则它什么也做不了。如果导入了多个css文件，则默认图标也会与awesome4图标重叠。

FancyTree引导程序主题不适用

1 个答案: