1. 程式人生 > >Angular引入Bootstrap Tree View後樹出不來的問題

Angular引入Bootstrap Tree View後樹出不來的問題

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');