bootstrap-treeview是一款效果非常酷的基於bootstrap的jQuery多級列表樹外掛，該jQuery外掛基於Twitter Bootstrap。寫這篇文章的目的在於記錄下使用方法，以期後用。

一、外掛官網：https://jquery-plugins.net/bootstrap-tree-view
二、demo示例：http://jonmiles.github.io/bootstrap-treeview/

三、依賴：

1. Bootstrap v3.3.4 (>= 3.0.0)
2. jQuery v2.1.3 (>= 1.9.0)

四、使用方法：

1.html檔案引入依賴:

1. <link rel="stylesheet" href="css/bootstrap.min.css" />
2. <link rel="stylesheet" href="css/bootstrap-treeview.min.css" />
3. <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
4. <script type="text/javascript" src="js/bootstrap.min.js" ></script>
5. <script type="text/javascript" src="js/bootstrap-treeview.min.js" ></script>

2.設定一個DOM元素以接收樹形資料：

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

3.使用格式：

$('#tree').treeview(options);  //其中options選項允許使用者定製treeview的預設外觀和行為。它們在初始化時作為一個物件被傳遞給外掛。

4.使用示例(js動態獲取後臺資料，並渲染樹形結構)：

1. $(function() {
2. $('#tree').treeview({
3. data: getTree()//節點資料
4. });
5. })
7. function getTree() {
8. //節點上的資料遵循如下的格式：
9. var tree = [{
10. text: "Node 1", //節點顯示的文字值 string
11. icon: "glyphicon glyphicon-play-circle", //節點上顯示的圖示，支援bootstrap的圖示 string
12. selectedIcon: "glyphicon glyphicon-ok", //節點被選中時顯示的圖示 string
13. color: "#ff0000", //節點的前景色 string
14. backColor: "#1606ec", //節點的背景色 string
15. href: "#http://www.baidu.com", //節點上的超連結
16. selectable: true, //標記節點是否可以選擇。false表示節點應該作為擴充套件標題，不會觸發選擇事件。 string
17. state: { //描述節點的初始狀態 Object
18. checked: true, //是否選中節點
19. /*disabled: true,*/ //是否禁用節點
20. expanded: true, //是否展開節點
21. selected: true //是否選中節點
22. },
23. tags: ['標籤資訊1', '標籤資訊2'], //向節點的右側新增附加資訊（類似與boostrap的徽章） Array of Strings
24. nodes: [{
25. text: "Child 1",
26. nodes: [{
27. text: "Grandchild 1"
28. }, {
29. text: "Grandchild 2"
30. }]
31. }, {
32. text: "Child 2"
33. }]
34. }, {
35. text: "Parent 2",
36. nodes: [{
37. text: "Child 2",
38. nodes: [{
39. text: "Grandchild 3"
40. }, {
41. text: "Grandchild 4"
42. }]
43. }, {
44. text: "Child 2"
45. }]
46. }, {
47. text: "Parent 3"
48. }, {
49. text: "Parent 4"
50. }, {
51. text: "Parent 5"
52. }];
54. return tree;
55. }

五、其他說明：

1、引數詳解（可用的引數）：var options = {

1. data: data, //data屬性是必須的，是一個物件陣列 Array of Objects.
2. color: "", //所有節點使用的預設前景色，這個顏色會被節點資料上的backColor屬性覆蓋. String
3. backColor: "#000000", //所有節點使用的預設背景色，這個顏色會被節點資料上的backColor屬性覆蓋. String
4. borderColor: "#000000", //邊框顏色。如果不想要可見的邊框，則可以設定showBorder為false。 String
5. nodeIcon: "glyphicon glyphicon-stop", //所有節點的預設圖示
6. checkedIcon: "glyphicon glyphicon-check", //節點被選中時顯示的圖示 String
7. collapseIcon: "glyphicon glyphicon-minus", //節點被摺疊時顯示的圖示 String
8. expandIcon: "glyphicon glyphicon-plus", //節點展開時顯示的圖示 String
9. emptyIcon: "glyphicon", //當節點沒有子節點的時候顯示的圖示 String
10. enableLinks: false, //是否將節點文字呈現為超連結。前提是在每個節點基礎上，必須在資料結構中提供href值。 Boolean
11. highlightSearchResults: true, //是否高亮顯示被選中的節點 Boolean
12. levels: 2, //設定整棵樹的層級數 Integer
13. multiSelect: false, //是否可以同時選擇多個節點 Boolean
14. onhoverColor: "#F5F5F5", //游標停在節點上啟用的預設背景色 String
15. selectedIcon: "glyphicon glyphicon-stop", //節點被選中時顯示的圖示 String
17. searchResultBackColor: "", //當節點被選中時的背景色
18. searchResultColor: "", //當節點被選中時的前景色
20. selectedBackColor: "", //當節點被選中時的背景色
21. selectedColor: "#FFFFFF", //當節點被選中時的前景色
23. showBorder: true, //是否在節點周圍顯示邊框
24. showCheckbox: false, //是否在節點上顯示複選框
25. showIcon: true, //是否顯示節點圖示
26. showTags: false, //是否顯示每個節點右側的標記。前提是這個標記必須在每個節點基礎上提供資料結構中的值。
27. uncheckedIcon: "glyphicon glyphicon-unchecked", //未選中的複選框時顯示的圖示，可以與showCheckbox一起使用
28. }

2、方法詳解（可用的方法列表）：

1. 1. checkAll(options);//選中所有樹節點
2. 2. checkNode(node | nodeId, options); //選中一個給定nodeId的樹節點
3. 3. clearSearch();//清除查詢結果
4. 4. collapseAll(options);//摺疊所有樹節點
5. 5. collapseNode(node | nodeId, options);//摺疊一個給定nodeId的樹節點和它的子節點
6. 6. disableAll(options);//禁用所有樹節點
7. 7. disableNode(node | nodeId, options);//禁用一個給定nodeId的樹節點
8. 8. enableAll(options);//啟用所有樹節點
9. 9. enableNode(node | nodeId, options);//啟用給定nodeId的樹節點
10. 10. expandAll(options);//展開所有節點
11. 11. expandNode(node | nodeId, options);//展開給定nodeId的樹節點
12. 12. getCollapsed();//返回被摺疊的樹節點陣列
13. 13. getDisabled();//返回被禁用的樹節點陣列
14. 14. getEnabled();//返回被啟用的樹節點陣列
15. 15. getExpanded();//返回被展開的樹節點陣列
16. 16. getNode(nodeId);//返回與給定節點id相匹配的單個節點物件。
17. 17. getParent(node | nodeId);//返回給定節點id的父節點
18. 18. getSelected();//返回被選定節點的陣列。
19. 19. getSiblings(node | nodeId);//返回給定節點的兄弟節點陣列
20. 20. getUnselected();//返回未選擇節點的陣列
21. 21. remove();//刪除the tree view component.刪除繫結的事件，內部附加的物件，並新增HTML元素。
22. 22. revealNode(node | nodeId, options);//顯示給定的樹節點，將樹從節點擴充套件到根。
23. 23. search(pattern, options);//在樹檢視中搜索匹配給定字串的節點，並在樹中突出顯示它們。返回匹配節點的陣列。
24. 24. selectNode(node | nodeId, options);//選擇一個給定的樹節點
25. 25. toggleNodeChecked(node | nodeId, options);//Toggles a nodes checked state; checking if unchecked, unchecking if checked.
26. 26. toggleNodeDisabled(node | nodeId, options);//切換節點的禁用狀態;
27. 27. toggleNodeExpanded(node | nodeId, options);//切換節點的展開與摺疊狀態
28. 28. toggleNodeSelected(node | nodeId, options);//切換節點的選擇狀態
29. 29. uncheckAll(options);//不選所有節點
30. 30. uncheckNode(node | nodeId, options);//不選給定nodeId的節點
31. 31. unselectNode(node | nodeId, options);//不選給定nodeId的節點
33. 說明：可以通過兩種方式來呼叫方法：
35. 1、外掛包裝器：外掛的包裝器可以作為訪問底層方法的代理。
37. $('#tree').treeview('methodName', args);
39. 其中，多個引數必須使用陣列物件來傳入。
41. 2、直接使用treeview：你可以通過下面兩種方法中的一種來獲取treeview物件例項：
43. //該方法返回一個treeview的物件例項
44. $('#tree').treeview(true).methodName(args);
46. //物件例項也儲存在DOM元素的data中， 可以使用'treeview'的id來訪問它。
47. $('#tree').data('treeview').methodName(args);

3、事件詳解（可用的事件列表）：

1. 1. nodeChecked (event, node) - 一個節點被checked.
2. 2. nodeUnchecked (event, node) - 一個節點被unchecked.
3. 3. nodeCollapsed (event, node) - 一個節點被摺疊.
4. 4. nodeDisabled (event, node) - 一個節點被禁用.
5. 5. nodeEnabled (event, node) - 一個節點被啟用.
6. 6. nodeExpanded (event, node) - 一個節點被展開.
7. 7. nodeSelected (event, node) - 一個節點被選擇.
8. 8. nodeUnselected (event, node) - 取消選擇一個節點.
9. 9. searchComplete (event, results) - 搜尋完成之後觸發.
10. 10. searchCleared (event, results) - 搜尋結果被清除之後觸發.
12. 說明：事件的呼叫有兩種方式：
14. 第 1 種：在引數中使用回撥函式來繫結任何事件：
15. $('#tree').treeview({
16. //命名約定：以on為字首，並將事件名的第一個字母轉為大寫，例如： nodeSelected -> onNodeSelected
17. onNodeSelected:function(event, data) {
18. // 事件程式碼...
19. }
20. });
22. 第 2 種：使用標準的jQuery .on()方法來繫結事件:
23. $('#tree').on('nodeSelected',function(event, data) {
24. // 事件程式碼...
25. });