淺談風格的樹形外掛bootstrap-treeview的使用方法
2021-01-29 12:01:08
相關推薦：《》
bootstrap-treeview是一款效果非常酷的基於bootstrap的jQuery多級列表樹外掛，該jQuery外掛基於Twitter Bootstrap。寫這篇文章的目的在於記錄下使用方法，以期後用。
一、外掛官網：https://jquery-plugins.net/bootstrap-tree-view
二、demo範例：http://jonmiles.github.io/bootstrap-treeview/
三、依賴：
Bootstrap v3.3.4 (>= 3.0.0) jQuery v2.1.3 (>= 1.9.0)
四、使用方法：
1.html檔案引入依賴:
<link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/bootstrap-treeview.min.css" /> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> <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動態獲取後臺資料，並渲染樹形結構)：
$(function() {
$('#tree').treeview({
data: getTree()//節點資料
});
})
function getTree() {
//節點上的資料遵循如下的格式：
var tree = [{
text: "Node 1", //節點顯示的文字值 string
icon: "glyphicon glyphicon-play-circle", //節點上顯示的圖示，支援bootstrap的圖示 string
selectedIcon: "glyphicon glyphicon-ok", //節點被選中時顯示的圖示 string
color: "#ff0000", //節點的前景色 string
backColor: "#1606ec", //節點的背景色 string
href: "#http://www.baidu.com", //節點上的超連結
selectable: true, //標記節點是否可以選擇。false表示節點應該作為擴充套件標題，不會觸發選擇事件。 string
state: { //描述節點的初始狀態 Object
checked: true, //是否選中節點
/*disabled: true,*/ //是否禁用節點
expanded: true, //是否展開節點
selected: true //是否選中節點
},
tags: ['標籤資訊1', '標籤資訊2'], //向節點的右側新增附加資訊（類似與boostrap的徽章） Array of Strings
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1"
}, {
text: "Grandchild 2"
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 2",
nodes: [{
text: "Child 2",
nodes: [{
text: "Grandchild 3"
}, {
text: "Grandchild 4"
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
return tree;
}五、其他說明：
1、引數詳解（可用的引數）：
var options = {
data: data, //data屬性是必須的，是一個物件陣列 Array of Objects.
color: "", //所有節點使用的預設前景色，這個顏色會被節點資料上的backColor屬性覆蓋. String
backColor: "#000000", //所有節點使用的預設背景色，這個顏色會被節點資料上的backColor屬性覆蓋. String
borderColor: "#000000", //邊框顏色。如果不想要可見的邊框，則可以設定showBorder為false。 String
nodeIcon: "glyphicon glyphicon-stop", //所有節點的預設圖示
checkedIcon: "glyphicon glyphicon-check", //節點被選中時顯示的圖示 String
collapseIcon: "glyphicon glyphicon-minus", //節點被摺疊時顯示的圖示 String
expandIcon: "glyphicon glyphicon-plus", //節點展開時顯示的圖示 String
emptyIcon: "glyphicon", //當節點沒有子節點的時候顯示的圖示 String
enableLinks: false, //是否將節點文字呈現為超連結。前提是在每個節點基礎上，必須在資料結構中提供href值。 Boolean
highlightSearchResults: true, //是否高亮顯示被選中的節點 Boolean
levels: 2, //設定整棵樹的層級數 Integer
multiSelect: false, //是否可以同時選擇多個節點 Boolean
onhoverColor: "#F5F5F5", //遊標停在節點上啟用的預設背景色 String
selectedIcon: "glyphicon glyphicon-stop", //節點被選中時顯示的圖示 String
searchResultBackColor: "", //當節點被選中時的背景色
searchResultColor: "", //當節點被選中時的前景色
selectedBackColor: "", //當節點被選中時的背景色
selectedColor: "#FFFFFF", //當節點被選中時的前景色
showBorder: true, //是否在節點周圍顯示邊框
showCheckbox: false, //是否在節點上顯示核取方塊
showIcon: true, //是否顯示節點圖示
showTags: false, //是否顯示每個節點右側的標記。前提是這個標記必須在每個節點基礎上提供資料結構中的值。
uncheckedIcon: "glyphicon glyphicon-unchecked", //未選中的核取方塊時顯示的圖示，可以與showCheckbox一起使用
}2、方法詳解（可用的方法列表）：
1. checkAll(options);//選中所有樹節點
2. checkNode(node | nodeId, options); //選中一個給定nodeId的樹節點
3. clearSearch();//清除查詢結果
4. collapseAll(options);//摺疊所有樹節點
5. collapseNode(node | nodeId, options);//摺疊一個給定nodeId的樹節點和它的子節點
6. disableAll(options);//禁用所有樹節點
7. disableNode(node | nodeId, options);//禁用一個給定nodeId的樹節點
8. enableAll(options);//啟用所有樹節點
9. enableNode(node | nodeId, options);//啟用給定nodeId的樹節點
10. expandAll(options);//展開所有節點
11. expandNode(node | nodeId, options);//展開給定nodeId的樹節點
12. getCollapsed();//返回被摺疊的樹節點陣列
13. getDisabled();//返回被禁用的樹節點陣列
14. getEnabled();//返回被啟用的樹節點陣列
15. getExpanded();//返回被展開的樹節點陣列
16. getNode(nodeId);//返回與給定節點id相匹配的單個節點物件。
17. getParent(node | nodeId);//返回給定節點id的父節點
18. getSelected();//返回被選定節點的陣列。
19. getSiblings(node | nodeId);//返回給定節點的兄弟節點陣列
20. getUnselected();//返回未選擇節點的陣列
21. remove();//刪除the tree view component.刪除繫結的事件，內部附加的物件，並新增HTML元素。
22. revealNode(node | nodeId, options);//顯示給定的樹節點，將樹從節點擴充套件到根。
23. search(pattern, options);//在樹檢視中搜尋匹配給定字串的節點，並在樹中突出顯示它們。返回匹配節點的陣列。
24. selectNode(node | nodeId, options);//選擇一個給定的樹節點
25. toggleNodeChecked(node | nodeId, options);//Toggles a nodes checked state; checking if unchecked, unchecking if checked.
26. toggleNodeDisabled(node | nodeId, options);//切換節點的禁用狀態;
27. toggleNodeExpanded(node | nodeId, options);//切換節點的展開與摺疊狀態
28. toggleNodeSelected(node | nodeId, options);//切換節點的選擇狀態
29. uncheckAll(options);//不選所有節點
30. uncheckNode(node | nodeId, options);//不選給定nodeId的節點
31. unselectNode(node | nodeId, options);//不選給定nodeId的節點
說明：可以通過兩種方式來呼叫方法：
1、外掛包裝器：外掛的包裝器可以作為存取底層方法的代理。
$('#tree').treeview('methodName', args);
其中，多個引數必須使用陣列物件來傳入。
2、直接使用treeview：你可以通過下面兩種方法中的一種來獲取treeview物件範例：
//該方法返回一個treeview的物件範例
$('#tree').treeview(true).methodName(args);
//物件範例也儲存在DOM元素的data中， 可以使用'treeview'的id來存取它。
$('#tree').data('treeview').methodName(args);3、事件詳解（可用的事件列表）：
1. nodeChecked (event, node) - 一個節點被checked.
2. nodeUnchecked (event, node) - 一個節點被unchecked.
3. nodeCollapsed (event, node) - 一個節點被摺疊.
4. nodeDisabled (event, node) - 一個節點被禁用.
5. nodeEnabled (event, node) - 一個節點被啟用.
6. nodeExpanded (event, node) - 一個節點被展開.
7. nodeSelected (event, node) - 一個節點被選擇.
8. nodeUnselected (event, node) - 取消選擇一個節點.
9. searchComplete (event, results) - 搜尋完成之後觸發.
10. searchCleared (event, results) - 搜尋結果被清除之後觸發.
說明：事件的呼叫有兩種方式：
第 1 種：在引數中使用回撥函數來繫結任何事件：
$('#tree').treeview({
//命名約定：以on為字首，並將事件名的第一個字母轉為大寫，例如： nodeSelected -> onNodeSelected
onNodeSelected:function(event, data) {
// 事件程式碼...
}
});
第 2 種：使用標準的jQuery .on()方法來繫結事件:
$('#tree').on('nodeSelected',function(event, data) {
// 事件程式碼...
});六、完整demo下載
https://download.csdn.net/download/security_2015/10281802
更多程式設計相關知識，請存取：！！
以上就是淺談風格的樹形外掛bootstrap-treeview的使用方法的詳細內容，更多請關注TW511.COM其它相關文章！