Question

这是我的html文件。

 <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>Pimba na Bulita</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

       <!-- FontAwesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

       <!-- Bootstrap -->
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"/>

       <!-- My custom Css -->
       <link rel="stylesheet" type="text/css" media="screen" href="assets/css/main.css" /> 

       <!-- TreeView -->
       <link rel="stylesheet" type="text/css" href="assets/bootstrap-treeview/dist/bootstrap-treeview.min.css">
    </head>
    <body>
       <div class="col-md-6" align="center">            
          <span>List of Recent records</span>
          <div id="tree"></div>
       </div>  
        <!-- JQUERY -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
         crossorigin="anonymous"></script>

        <!-- Bootstrap JS -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>  


         <!-- TreeView -->
         <script src="./assets/bootstrap-treeview/dist/bootstrap- 
         treeview.min.js"></script>
    </body>

这是我的js文件，我在其中初始化bootstrap-treeview。

$(document).ready(function() {
    var tree = [
      {
        text: "Parent 1",
        nodes: [
          {
            text: "Child 1",
            nodes: [
              {
                text: "Grandchild 1"
              },
              {
                text: "Grandchild 2"
              }
            ]
          },
          {
            text: "Child 2"
          }
        ]
      },
      {
        text: "Parent 2"
      },
      {
        text: "Parent 3"
      },
      {
        text: "Parent 4"
      },
      {
        text: "Parent 5"
      }
    ];

    $('#tree').treeview({data: tree});
});

你们可以在下面看到。问题是：由于某种原因，无法扩展/折叠树。

详细信息：如果我从文件中删除css refenrece。它没有任何区别！

为什么会发生这种情况以及如何解决？

Answer 1

问题似乎源于Bootstrap4's dropping of the Glyphicons font。我的解决方案是在项目github上编辑developer分支的bootstrap-treeview.js文件，以便在第36-42行中指定的默认图标如下：

expandIcon: 'fa fa-plus-square-o',
collapseIcon: 'fa fa-minus-square-o',
emptyIcon: '',
nodeIcon: '',
selectedIcon: '',
checkedIcon: 'fa-check-square-o',
uncheckedIcon: 'fa fa-square-o',

请确保链接到您应用程序中的fontawesome5 CDN

Answer 2

问题出在bootstrap版本中。据我所知，v4不受支持。

使你的树工作改变v3上的BS导入：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

我现在正在寻找BS v4解决方案并深入研究：

http://gijgo.com/tree

Answer 3

您可以在 boostrap-treeview 中更改：

expandIcon: 'fa fa-plus',
collapseIcon: 'fa fa-minus'

---不要忘记包含：

<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

Bootstrap-treeview不会展开或折叠

3 个答案: