Блог

Я попытался создать представление в виде дерева. но это не работает должным образом. значок свертывания не отображается. Я упомянул о своем выходе и ожидаемом результате.

Попробованный код ниже:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<style>

<div id="tree"></div>

<script type="text/javascript">
    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});
</script>
  

Текущий вывод:

Желаемый результат

Bootstrap4 не поставляется со своими собственными значками, у вас есть несколько вариантов:

1. вместо этого вы можете использовать Bootstrap3
2. вы можете использовать другую библиотеку со значками, например, FontAwesome (в этом случае вам нужно установить «expandIcon» и «collapseIcon» при инициализации treeview)

  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, expandIcon: 'fa fa-plus',collapseIcon: 'fa fa-minus'});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet"/>
<div id="tree"></div>