Bootstrap-treeview не разворачивается и не разворачивается - PullRequest
Новая
       17

Bootstrap-treeview не разворачивается и не разворачивается

0 голосов
/ 24 мая 2018

Вот мой 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-файл, в котором я инициализирую дерево начальной загрузки. 

$(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 из файла.Это не имеет никакого значения!enter image description here

Почему это происходит и как это исправить?

Ответы [ 2 ]

0 голосов
/ 24 августа 2018

Проблема, похоже, связана с сбросом Bootstrap4 шрифта Glyphicons .Мое решение состояло в том, чтобы отредактировать файл bootstrap-treeview.js ветки разработчика на github проекта, чтобы значки по умолчанию, указанные в строках 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 в вашем приложении

0 голосов
/ 01 июня 2018

Проблема в загрузочной версии.Насколько я узнал, v4 не поддерживается.

Чтобы заставить ваше дерево работать, измените импорт BS на v3: 

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