雖然現在有了很多新的前端框架，但是有的時候我們做一個不需要任何其他js編譯環境就可以運行的項目，那還是的使用一些老式技術，接下來就來回顧一些bootstrap treeview + jquery的使用
bootstrap-treeview是一款效果非常酷的基於bootstrap的jQuery多級列表樹插件，該jQuery插件基於Twitter Bootstrap。
插件官網：https://jquery-plugins.net/bootstrap-tree-view
一、依賴下載
Bootstrap v3.3.4 (>= 3.0.0)
jQuery v2.1.3 (>= 1.9.0)
這個相配匹配的不怎么好找，有需要的朋友可以自己到我雲盤下載網盤地址https://pan.baidu.com/s/1OxxqD9MTjTx5XYvZs4EQpg 提取碼 ：fihe
引入
<link href="libs/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="libs/bootstrap-treeview.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="libs/bootstrap-3.3.7-dist/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="libs/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="libs/bootstrap-treeview.min.js"></script>
html中添加
<div id="tree"></div>
二、使用實例
$(function() {
$('#ftree').treeview({
data:getTree(),
showCheckbox:true,
hierarchicalCheck:true
})
})
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;
}
三、參數詳解
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一起使用
}
四、方法詳解
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);
五、事件詳解
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) {
// 事件代碼...
});
六、實現多級聯動
官方說的使用 hierarchicalCheck: true, 屬性設置級聯，但經測試無效，最后改用手動方式（遞歸聯動）
//選中全部父節點
function checkAllParent(node,nodeIds){
let parentNode = $('#tree').treeview('getParent',node.nodeId);
if(!("nodeId" in parentNode)){
return nodeIds;
}else {
nodeIds.push(parentNode.nodeId);
checkAllParent(parentNode,nodeIds);
}
}
//取消全部父節點
function uncheckAllParent(node,nodeIds){
let siblings = $('#tree').treeview('getSiblings', node.nodeId);
let parentNode = $('#tree').treeview('getParent',node.nodeId);
if(!("nodeId" in parentNode)) {
return nodeIds;
}
let isAllUnchecked = true; //是否全部沒選中
for(let i in siblings){
if(siblings[i].state.checked){
isAllUnchecked=false;
break;
}
}
if(isAllUnchecked){
nodeIds.push(parentNode.nodeId);
}
uncheckAllParent(parentNode,nodeIds);
}
//級聯選中所有子節點
function getAllSons(node,nodeIds){
nodeIds.push(node.nodeId);
if(node.nodes!=null&&node.nodes.length>0){
for(let i in node.nodes){
getAllSons(node.nodes[i],nodeIds);
}
}
}
調用
$('#tree').on('nodeChecked',function (event,node) {
// dosomething ...
// 定義數組記錄所有待選中節點nodeID
let chekableNodeIds=[];
checkAllParent(node,chekableNodeIds);
getAllSons(node,chekableNodeIds);
$('#tree').treeview('checkNode',[chekableNodeIds,{silent:true}])
});
$('#tree').on('nodeUnchecked',function (event,node) {
// dosomething ...
// 定義數組記錄所有待取消節點nodeID
let chekableNodeIds=[];
uncheckAllParent(node,chekableNodeIds);
getAllSons(node,chekableNodeIds);
$('#tree').treeview('uncheckNode',[chekableNodeIds,{silent:true}])
})
七、運行測試
如圖
完整demo下載 https://github.com/dengxiaoning/openlayers_bootstrap_treeview