bootstrap?

這是一個簡單而優雅的解決方案,顯示分層樹結構(即樹檢視),現在就介紹它的用法。

bootstrap treeview控制元件使用詳解

方法/步驟

依賴:

bootstrap-treeview需要依賴bootstrap和jquery兩個框架,現在具體需要的框架版本到官方網站去查。

bootstrap treeview控制元件使用詳解

方法/步驟2

基本用法:

新增以下資源以使引導樹檢視正常工作。

bootstrap treeview控制元件使用詳解

將元件繫結到任何現有的DOM元素。例如通過div標籤的id繫結。

bootstrap treeview控制元件使用詳解

基本用法可能如下所示(JavaScript程式碼)

bootstrap treeview控制元件使用詳解

方法/步驟3

資料結構

為了定義樹所需的層次結構,需要提供一個JavaScript物件的巢狀陣列。

bootstrap treeview控制元件使用詳解

一個樹節點被表示為一個簡單的JavaScript物件。 這是一個必需的屬性文字將建立一棵樹。

bootstrap treeview控制元件使用詳解

如果你想做更多,這裡是完整的節點規範

bootstrap treeview控制元件使用詳解

方法/步驟4

方法/步驟5

程式碼例子:

bootstrap-treeview.js 測試

預設

自定義圖示

豐富多彩

程式碼的瀏覽器效果

bootstrap treeview控制元件使用詳解

注意事項

程式碼是用谷歌瀏覽器Google Chrome瀏覽的,各個瀏覽器對css支援不同

用法, 控制元件, 檢視,
相關問題答案