jQuery多層列表樹外掛程式是基於Twitter Bootstrap，以簡單而優雅的方式來顯示一些繼承樹結構，如視圖樹、列表樹等等。
實用Bootstrap樹形選單特效插件Bootstrap Tree View，非常不錯的Bootstrap插件，現在很多Bootstrap製作的頁面都需要此功能，此插件需要Bootstrap3版本以及jQuery 2.0極以上版本支持，支持眾多參數自訂功能，顏色、背景色、圖示、連結等，還是很不錯的。
效果圖：
具體使用方法：
插件依賴
Bootstrap v3.0.3
jQuery v2.0.3j Bootstrap需要另行測試。該插件不支援bootstrap 2。
使用方法
首先要在頁面中引入依賴檔案和 bootstrap-treeview.js檔案。
<!-- Required Stylesheets --> <link href="./css/bootstrap.css" rel="stylesheet"> <!-- Required Javascript --> <script src="./js/jquery.js"></script> <script src="./js/bootstrap-treeview.js"></script>
HTML結構
可以使用任何HTML DOM元素來作為該列表樹的容器：
：
function getTree() {
// Some logic to retrieve, or generate tree structure
return data;
}
$('#tree').treeview({data: getTree()});資料結構
為了創建樹的繼承結構，需要為此列表樹插件提供嵌套結構的js物件。例如：var tree = [
{
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"
}
];最簡單的樹結構可以只有一個節點，使用一個帶有text屬性的js物件來實現即可：
{
text: "Node 1"
}
參考以下：
{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
全域參數
參數可以自訂treeview的預設外觀和行為。參數使用一個物件來在插件初始化時傳入：
// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$('#tree').treeview({
data: data, // data is not optional
levels: 5,
backColor: 'green'
});
可用方法
你可以透過兩種方式來呼叫方法：1、插件包裝器：插件的包裝器可以作為存取底層包裝方法的代理。
$('#tree').treeview('methodName', args)多個參數必須使用陣列物件來傳入。
2、直接使用treeview：你可以透過下面兩種方法中的一種來取得treeview物件實例。
//该方法返回一个treeview的对象实例 $('#tree').treeview(true) .methodName(args); //对象实例也保存在DOM元素的data中， //可以使用'treeview'的id来访问它。 $('#tree').data('treeview') .methodName(args);
