Angular引入Bootstrap Tree View后树出不来的问题

皇甫波峻
2023-12-01

1、修改jQuery调用方式

修改以下文件的jQuery调用方式:

manager\src\assets\js\bootstrap-treeview.min.js

将以下代码

$('#treeview1').treeview({
          selectedBackColor: "#03a9f3",
          onhoverColor: "rgba(0, 0, 0, 0.05)",
          expandIcon: 'ti-plus',
          collapseIcon: 'ti-minus',
          nodeIcon: 'fa fa-folder',
          data: defaultData
});

改为

$('.treeview1').treeview({
          selectedBackColor: "#03a9f3",
          onhoverColor: "rgba(0, 0, 0, 0.05)",
          expandIcon: 'ti-plus',
          collapseIcon: 'ti-minus',
          nodeIcon: 'fa fa-folder',
          data: defaultData
});

即将按ID调用改为按样式调用;

2、修改页面

修改以下文件的jQuery调用方式:

manager\src\app\dashboards\dashboard1\dashboard1.component.html

将以下代码

<div id="treeview1" class=""></div>

改为

<div id="treeview1" class="treeview1"></div>

即增加样式类定义;

3、初始化加载

在页面初始化后加载jS文件:

$.getScript('./assets/js/bootstrap-treeview-init.js');
$.getScript('./assets/js/bootstrap-treeview.min.js');

 

 类似资料: