淺析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中文網!本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
如何修復KB5055523無法在Windows 11中安裝?
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝?
3 週前
By DDD
<🎜>:死鐵路 - 如何馴服狼
4 週前
By DDD
R.E.P.O.的每個敵人和怪物的力量水平
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>:種植花園 - 完整的突變指南
2 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)