bootstrap-treeview是一款效果非常酷的基於bootstrap的jQuery多級列表樹插件,該jQuery插件基於Twitter Bootstrap, 以簡單和優雅的方式來顯示一些繼承樹結構,如視圖樹、列表樹等等。寫這篇文章的目的在於記錄下使用方法,以期後用。
一.概述
插件依賴:
- 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.使用格式:
//其中options選項允許用戶定製treeview的默認外觀和行爲。它們在初始化時作爲一個對象被傳遞給插件。
$('#tree').treeview(options);
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", //節點上的超鏈接
//標記節點是否可以選擇。false表示節點應該作爲擴展標題,不會觸發選擇事件。 string
selectable: true,
state: { //描述節點的初始狀態 Object
checked: true, //是否選中節點
/*disabled: true,*/ //是否禁用節點
expanded: true, //是否展開節點
selected: true //是否選中節點
},
//向節點的右側添加附加信息(類似與boostrap的徽章) Array of Strings
//通過結合全局showTags選項來在列表樹節點的右邊添加額外的信息。
tags: ['available', 'available2'],
nodes: [
{
text:"Parent 1",
nodes: [
{
text:"Child 1",
nodes: [
{
text:"Grandchild 1"
},
{
text:"Grandchild 2"
}
]
},
{
text:"Child 2"
}
]
},
{
text:"Parent 2"
},
{
text:"Parent 3"
},
{
text:"Parent 4"
},
{
text:"Parent 5"
}
];
return tree;
}
二.其它說明
1、參數詳解(可用的參數):
var options = {
data: data, //data屬性是必須的,是一個對象數組 Array of Objects.
//所有節點使用的默認前景色,這個顏色會被節點數據上的backColor屬性覆蓋. String
color: "",
//所有節點使用的默認背景色,這個顏色會被節點數據上的backColor屬性覆蓋. String
backColor: "#000000",
//邊框顏色。如果不想要可見的邊框,則可以設置showBorder爲false。 String
borderColor: "#000000",
nodeIcon: "glyphicon glyphicon-stop", //所有節點的默認圖標
checkedIcon: "glyphicon glyphicon-check", //節點被選中時顯示的圖標 String
collapseIcon: "glyphicon glyphicon-minus", //節點被摺疊時顯示的圖標 String
expandIcon: "glyphicon glyphicon-plus", //節點展開時顯示的圖標 String
emptyIcon: "glyphicon", //當節點沒有子節點的時候顯示的圖標 String
//是否將節點文本呈現爲超鏈接。前提是在每個節點基礎上,必須在數據結構中提供href值。 Boolean
enableLinks: false,
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,
//未選中的複選框時顯示的圖標,可以與showCheckbox一起使用
uncheckedIcon: "glyphicon glyphicon-unchecked",
}
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) {
// 事件代碼...
});
後臺數據傳遞可用遞歸:
- 參數分別爲實體對象、結果數組、數據數組
- 如果使用Map替代實體對象的話,寫法可以簡潔很多,只需幾行代碼
- 方法分爲兩部分:第一部分爲初始化,第二部分開始遞歸
/**
* 獲取樹
* @方法名:getTreeList
* @參數 @param kpi
* @參數 @return
* @返回類型 String
*/
public String getTreeList(Kpi kpi,List<Map<String, Object>> listmap,List<Kpi> list) {
if(listmap == null || list == null ) {
list= super.findList(kpi);
listmap = new ArrayList<Map<String,Object>>();
for(Kpi k: list) {
if(k.getParentId() == null || "".equals(k.getParentId()) || "null".equals(k.getParentId())) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", k.getId().toString());
map.put("text", k.getKpiName());
listmap.add(map);
}
}
getTreeList(kpi,listmap,list);
} else if(listmap.size()>0 && list.size()>0) {
for(Map<String, Object> mp:listmap) {
List<Map<String, Object>> childlist = new ArrayList<Map<String,Object>>();
for(Kpi k:list) {
String id = mp.get("id")+"";
String pid = k.getParentId()+"";
if(id.equals(pid)) {
Map<String, Object> m = new HashMap<String, Object>();
m.put("id", k.getId().toString());
m.put("text", k.getKpiName());
childlist.add(m);
}
}
if(childlist.size()>0) {
List<String> sizelist = new ArrayList<String>();
sizelist.add(childlist.size()+"");
mp.put("nodes", childlist);
mp.put("tags", sizelist);
getTreeList(kpi,childlist,list);
}
}
}
return JSONArray.fromObject(listmap).toString();
}
參考鏈接: