這是一個簡單而優雅的解決方案,顯示分層樹結構(即樹檢視),現在就介紹它的用法。
方法/步驟
依賴:
bootstrap-treeview需要依賴bootstrap和jquery兩個框架,現在具體需要的框架版本到官方網站去查。
方法/步驟2
基本用法:
新增以下資源以使引導樹檢視正常工作。
將元件繫結到任何現有的DOM元素。例如通過div標籤的id繫結。
基本用法可能如下所示(JavaScript程式碼)
方法/步驟3
資料結構
為了定義樹所需的層次結構,需要提供一個JavaScript物件的巢狀陣列。
一個樹節點被表示為一個簡單的JavaScript物件。 這是一個必需的屬性文字將建立一棵樹。
如果你想做更多,這裡是完整的節點規範
方法/步驟4
方法/步驟5
程式碼例子:
預設
自定義圖示
豐富多彩
$(function() {
var defaultData = [
{
text: 'Parent 1',
href: '#parent1',
tags: ['4'],
nodes: [
{
text: 'Child 1',
href: '#child1',
tags: ['2'],
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
tags: ['0']
},
{
text: 'Grandchild 2',
href: '#grandchild2',
tags: ['0']
}
]
},
{
text: 'Child 2',
href: '#child2',
tags: ['0']
}
]
},
{
text: 'Parent 2',
href: '#parent2',
tags: ['0']
},
{
text: 'Parent 3',
href: '#parent3',
tags: ['0']
},
{
text: 'Parent 4',
href: '#parent4',
tags: ['0']
},
{
text: 'Parent 5',
href: '#parent5' ,
tags: ['0']
}
];
$('#treeview1').treeview({
backColor: "#FFFFFF",
color: "#428bca",
enableLinks: true,
data: defaultData
});
$('#treeview2').treeview({
color: "#428bca",
expandIcon: 'glyphicon glyphicon-chevron-right',
collapseIcon: 'glyphicon glyphicon-chevron-down',
nodeIcon: 'glyphicon glyphicon-bookmark',
data: defaultData
});
$('#treeview3').treeview({
expandIcon: "glyphicon glyphicon-stop",
collapseIcon: "glyphicon glyphicon-unchecked",
nodeIcon: "glyphicon glyphicon-user",
color: "yellow",
backColor: "purple",
onhoverColor: "orange",
borderColor: "red",
showBorder: false,
showTags: true,
highlightSelected: true,
selectedColor: "yellow",
selectedBackColor: "darkorange",
data: defaultData
});
});
程式碼的瀏覽器效果
注意事項
程式碼是用谷歌瀏覽器Google Chrome瀏覽的,各個瀏覽器對css支援不同