淺析BootStrap Treeview的簡單使用

bootstrap-treeview.js1是一款強大的樹選單外掛程式,本文介紹bootstrap treeview的簡單使用。

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

1、bootstrap-treeview Github網址：

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>

   

中，樹的資料格式可以Json格式，也可以寫死，當然寫死的程式碼肯定不靈活。

4、簡單使用：

　　4.1 新增容器：

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.2 定義樹結構：（datadataJson格式資料，這裡獲取

注：onNodeChecked 和onNodeSelected 方法是說明文​​檔中預設的方法，還有其他的方法，自己查閱說明文檔，或者查看bootstrap-treeview.js 文件，未壓縮的js文件內容非常詳細，易於理解。

　　4.3 Json格式資料來源：（採用.net MVC框架，列出簡單的Control代碼）

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

   

5、總結：

也需要簡單的創建了樹，設計，自己閱讀bootstrap-treeview.js 還是很有啟發和發現的0-0,。

補充：

以上所述是小編給大家介紹的bootstrap treeview的簡單使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持！

更多淺析BootStrap Treeview的簡單使用相關文章請關注PHP中文網！