树视图在NodeJ中无法正常工作

问题描述

我尝试创建树视图。但它不能正常工作。不显示折叠图标。我已经提到了我的预期结果。

下面尝试过的代码：

<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”）

 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>