快捷導(dǎo)航

淺析BootStrap Treeview的簡單使用

更新時(shí)間：2016年10月12日 09:17:22 作者：一夜淚水催人醉

bootstrap-treeview.js1是一款強(qiáng)大的樹菜單插件,本文給大家介紹bootstrap treeview的簡單使用，涉及到使用要求及數(shù)據(jù)格式的介紹，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友參考下

bootstrap-treeview.js1是一款強(qiáng)大的樹菜單插件,本文給大家介紹bootstrap treeview的簡單使用。

廢話不多說，直接上干干貨。

1、bootstrap-treeview Github網(wǎng)址：

https://github.com/jonmiles/bootstrap-treeview

2、使用要求：

<!-- 樣式表 -->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/bootstrap-treeview.css" rel="stylesheet" />
<!-- JS文件 -->
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

3、數(shù)據(jù)格式：（注意了，使用過程中，樹的數(shù)據(jù)格式可以Json格式，也可以寫死，當(dāng)然寫死的代碼肯定不靈活。Json格式的字段名一定要按照tree的字段要求，即文本格式text，子節(jié)點(diǎn)名稱nodes等）

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"
}
];

4、簡單使用：

　　4.1 添加容器：

<div id="tree"></div>

　　4.2 定義樹結(jié)構(gòu)：（data為Json格式數(shù)據(jù)，這里采用ajax，從后臺獲取，代碼如下）

<script>
$(function () {
$.ajax({
type: "Post",
url: "/Home/GetTreeJson",
dataType: "json",
success: function (result) {
$('#tree').treeview({
data: result, // 數(shù)據(jù)源
showCheckbox: true, //是否顯示復(fù)選框
highlightSelected: true, //是否高亮選中
//nodeIcon: 'glyphicon glyphicon-user', //節(jié)點(diǎn)上的圖標(biāo)
nodeIcon: 'glyphicon glyphicon-globe',
emptyIcon: '', //沒有子節(jié)點(diǎn)的節(jié)點(diǎn)圖標(biāo)
multiSelect: false, //多選
onNodeChecked: function (event,data) {
alert(data.nodeId);
},
onNodeSelected: function (event, data) {
alert(data.nodeId);
}
});
},
error: function () {
alert("樹形結(jié)構(gòu)加載失??！")
}
});
})
</script>

注：onNodeChecked 和 onNodeSelected 方法是說明文檔中默認(rèn)的方法，還有其他的方法，自己自己查閱說明文檔，或者查看 bootstrap-treeview.js 文件，未壓縮的js文件內(nèi)容非常詳細(xì)，易懂。

　　4.3 Json格式數(shù)據(jù)源：（采用.net MVC框架，列出簡單的Control代碼）

/// <summary>
/// 返回Json格式數(shù)據(jù)
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult GetTreeJson()
{
var nodeA = new List<Node>();
nodeA.Add(new Node(4, "A01", null));
nodeA.Add(new Node(5, "A02", null));
nodeA.Add(new Node(6, "A03", null));

var nodeB = new List<Node>();
nodeB.Add(new Node(7, "B07", null));
nodeB.Add(new Node(8, "B08", null));
nodeB.Add(new Node(9, "B09", null));

var nodes = new List<Node>();
nodes.Add(new Node(1, "A01", nodeA));
nodes.Add(new Node(2, "B02", nodeB));
nodes.Add(new Node(3, "A03", null));
return Json(nodes, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// Tree類
/// </summary>
public class Node
{
public Node() { }
public Node(int id, string str, List<Node> node)
{
nodeId = id;
text = str;
nodes = node;
}
public int nodeId; //樹的節(jié)點(diǎn)Id，區(qū)別于數(shù)據(jù)庫中保存的數(shù)據(jù)Id。若要存儲數(shù)據(jù)庫數(shù)據(jù)的Id，添加新的Id屬性；若想為節(jié)點(diǎn)設(shè)置路徑，類中添加Path屬性
public string text; //節(jié)點(diǎn)名稱
public List<Node> nodes; //子節(jié)點(diǎn)，可以用遞歸的方法讀取，方法在下一章會總結(jié)
}

5、總結(jié)：

簡單的創(chuàng)建了樹，復(fù)雜的功能以及邏輯判斷還需要進(jìn)一步設(shè)計(jì)，自己閱讀bootstrap-treeview.js 還是很有啟發(fā)和發(fā)現(xiàn)的0-0,。

補(bǔ)充：