bootstrap-treeview 中文開發手冊

官方文檔URL：  https://www.npmjs.com/package/bootstrap-treeview

2017年11月21日10:45:10

演示：http://www.htmleaf.com/Demo/201502141380.html

下載：http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html

 github： https://github.com/jonmiles/bootstrap-treeview 英文原版在下面

依賴

如果提供這些是實際版本bootstrap-treeview已經過測試

• Bootstrap v3.3.4 (>= 3.0.0)
• jQuery v2.1.3 (>= 1.9.0)

開始

安裝

您可以使用bower安裝（推薦）：

$ bower install bootstrap-treeview

或者使用 npm:(cnpm吧，你懂的)

$ npm install bootstrap-treeview

獲取去官網直接下載

用法

為bootstrap-treeview添加以下資源以正確運行

<!-- Required Stylesheets --> <link href="bootstrap.css" rel="stylesheet"> <!-- Required Javascript --> <script src="jquery.js"></script> <script src="bootstrap-treeview.js"></script>

該組件將綁定到任何現有的DOM元素

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

基本用法可能看起來像這樣

function getTree() { // Some logic to retrieve, or generate tree structure return data; } $('#tree').treeview({data: getTree()});

 

數據結構

為了定義樹所需的層次結構，有必要提供一個JavaScript對象的嵌套數組

例

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

在最底層，一個樹節點被表示為一個簡單的JavaScript對象。 這個必需的屬性文本將建立一棵樹

{
  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: [ {}, ... ] }

//如果你數組里有其他數據，也可以直接加入里面比如

權限節點ID：XXX，

權限節點URL：URL

節點屬性

定義以下屬性以允許節點級別覆蓋，如節點特定的圖標，顏色和標記

text

String Mandatory  字符串 必需

顯示給定樹節點的文本值，通常位於節點圖標的右側

icon

String Optional 字符串 可選

顯示在給定節點上的圖標，通常位於文本的左側。

為簡單起見，我們直接利用Bootstraps Glyphicons支持，因此您應該提供由空格分隔的基類和個別圖標類。

通過提供基類，您可以完全控制所使用的圖標。 如果你想使用自己的，那么只需將您的類添加到此圖標字段

selectedIcon

String Optional 字符串 可選

選定時顯示在給定節點上的圖標，通常位於文本的左側

color

String Optional 字符串 可選

在給定節點上使用的前景顏色將覆蓋全局顏色選項

backColor

String Optional 字符串 可選

給定節點上使用的背景顏色將覆蓋全局顏色選項

href

String Optional 字符串 可選

與全局enableLinks選項一起使用，以指定給定節點上的錨點標記URL

selectable

布爾值 默認值：true

是否可以在樹中選擇一個節點。 False表示節點應作為擴展標題，不會觸發選擇事件

state

Object Optional 字符串 可選

描述節點的初始狀態

state.checked

布爾值 默認值：false

是否選中一個節點，用復選框風格的圖標表示

state.disabled

布爾值 默認值：false

是否禁用節點（不可選擇，可擴展或可選）

state.expanded

布爾值 默認值：false

是否展開節點，即打開。 優先於全局選項水平

state.selected

布爾值 默認值：false

是否選擇一個節點

tags

字符串數組 可選

與全局showTags選項一起使用可將附加信息添加到每個節點的右側; 使用Bootstrap Badges

Extendible

您可以通過添加應用程序所需的任意數量的附加鍵值對來擴展節點對象。 請記住，這是在選擇事件期間將被傳遞的對象

Options

選項允許您自定義樹視圖的默認外觀和行為。 它們在初始化時作為對象傳遞給插件

//例子：初始化樹視圖
/ /擴大到5級
//背景顏色為綠色

 $('#tree').treeview({ data: data, // data is not optional levels: 5, backColor: 'green' });

您可以隨時將新的選項對象傳遞給樹視圖，但是這將會重新初始化樹視圖

List of Options

以下是所有可用選項的列表

data

對象數組。 沒有默認，期望數據

這是樹視圖顯示的核心數據。

backColor

字符串，任何合法的顏色值。 默認值：從Bootstrap.css繼承。

設置所有節點使用的默認背景色，除了在數據中以每個節點為基礎重寫時

borderColor

字符串，任何合法的顏色值。 默認值：從Bootstrap.css繼承。

設置組件的邊框顏色; 設置showBorder為false，如果你不想要一個可見的邊框

checkedIcon

字符串，類名。 默認：由Bootstrap Glyphicons定義的“glyphicon glyphicon-check”

將圖標設置為復選框，與showCheckbox一起使用

collapseIcon

字符串，類名稱。 默認：Bootstrap Glyphicons定義的“glyphicon glyphicon-minus”

設置要在可折疊樹節點上使用的圖標

color

字符串，任何合法的顏色值。 默認值：從Bootstrap.css繼承。

設置所有節點使用的默認前景色，除了在數據中以每個節點為基礎重寫時

emptyIcon

字符串，類名稱。 默認：Bootstrap Glyphicons定義的“glyphicon”

設置要在沒有子節點的樹節點上使用的圖標

enableLinks

布爾。 默認：false

是否將節點文本顯示為超鏈接。 其數據結構中的href值必須在每個節點的基礎上提供。

expandIcon

字符串，類名稱。 默認：Bootstrap Glyphicons定義的“glyphicon glyphicon-plus”

設置要在可展開樹節點上使用的圖標

highlightSearchResults

布爾。 默認值：true

是否突出顯示搜索結果

highlightSelected

布爾。 默認值：true

是否突出顯示選定的節點

levels

整數。 默認：2

設置默認情況下樹將被展開到深層的層次級別的數量

multiSelect

布爾。 默認：false

是否可以同時選擇多個節點

nodeIcon

字符串，類名稱。 默認：由Bootstrap Glyphicons定義的“glyphicon glyphicon-stop”

設置要在所有節點上使用的默認圖標，除非在數據中以每個節點為基礎重寫

onhoverColor

字符串，任何合法的顏色值。默認：'＃F5F5F5'。

設置當用戶光標懸停在節點上時激活的默認背景色

selectedIcon

字符串，類名稱。 默認：由Bootstrap Glyphicons定義的“glyphicon glyphicon-stop”

設置要在所有選定節點上使用的默認圖標，除非在數據中的每個節點基礎上重寫

searchResultBackColor

字符串，任何合法的顏色值。 默認值：undefined，繼承。

設置選定節點的背景顏色

searchResultColor

字符串，任何合法的顏色值。 默認：'＃D9534F'。

設置選定節點的前景色

selectedBackColor

字符串，任何合法的顏色值。 默認：'＃428bca'。

設置選定節點的背景顏色

selectedColor

字符串，任何合法的顏色值。 默認：'#FFFFFF'。

設置選定節點的前景色

showBorder

布爾。 默認值：true

是否在節點周圍顯示邊框

showCheckbox

布爾。 默認：false

是否顯示節點上的復選框

showIcon

布爾。 默認值：true

是否顯示節點圖標

showTags

布爾。 默認：false

是否在每個節點的右側顯示標簽。 其值必須在每個節點的數據結構中提供

uncheckedIcon

字符串，類名。 默認：由Bootstrap Glyphicons定義的“glyphicon glyphicon-unchecked”

將圖標設置為未勾選的復選框，與showCheckbox一起使用

方法

方法提供了一種以編程方式與插件交互的方式。 例如，可以通過expandNode方法擴展一個節點。

您可以通過以下兩種方式之一調用方法：

1. The plugin's wrapper

插件的包裝器作為訪問底層方法的代理

$('#tree').treeview('methodName', args)

限制，多個參數必須作為參數數組傳遞

2. The treeview directly

您可以使用以下兩種方法之一獲取樹視圖的實例

//這個特殊的方法返回樹視圖的一個實例 $('#tree').treeview(true) .methodName(args); 

//實例也保存在DOM元素數據中，
//可以使用插件的ID“treeview”訪問

 $('#tree').data('treeview') .methodName(args);

一個更好的方法，如果你計划了很多交互

List of Methods

以下是所有可用方法的列表

checkAll(options)

檢查所有樹節點

$('#tree').treeview('checkAll', { silent: true });

Triggers nodeChecked event; pass silent to suppress events.

checkNode(node | nodeId, options)

檢查給定的樹節點，接受節點或nodeId

$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);

Triggers nodeChecked event; pass silent to suppress events.

clearSearch()

清除任何先前搜索結果的樹形視圖，例如 刪除其突出顯示的狀態

$('#tree').treeview('clearSearch');

Triggers searchCleared event

collapseAll(options)

折疊所有樹節點，折疊整個樹

$('#tree').treeview('collapseAll', { silent: true });

Triggers nodeCollapsed event; pass silent to suppress events.

collapseNode(node | nodeId, options)

折疊給定的樹節點，它是子節點。 如果您不想折疊子節點，請傳遞選項 { ignoreChildren: true }.

$('#tree').treeview('collapseNode', [ nodeId, { silent: true, ignoreChildren: false } ]);

Triggers nodeCollapsed event; pass silent to suppress events.

disableAll(options)

禁用所有樹節點

$('#tree').treeview('disableAll', { silent: true });

Triggers nodeDisabled event; pass silent to suppress events.

disableNode(node | nodeId, options)

禁用給定的樹節點，接受節點或nodeId

$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);

Triggers nodeDisabled event; pass silent to suppress events.

enableAll(options)

啟用所有樹節點

$('#tree').treeview('enableAll', { silent: true });

Triggers nodeEnabled event; pass silent to suppress events.

enableNode(node | nodeId, options)

啟用給定的樹節點，接受節點或nodeId

$('#tree').treeview('enableNode', [ nodeId, { silent: true } ]);

Triggers nodeEnabled event; pass silent to suppress events.

expandAll(options)

展開所有樹節點。 可以選擇擴展到任何給定數量的級別

$('#tree').treeview('expandAll', { levels: 2, silent: true });

Triggers nodeExpanded event; pass silent to suppress events.

expandNode(node | nodeId, options)

展開給定的樹節點，接受節點或nodeId。 可以選擇擴展到任何給定數量的級別

$('#tree').treeview('expandNode', [ nodeId, { levels: 2, silent: true } ]);

Triggers nodeExpanded event; pass silent to suppress events.

getCollapsed()

返回折疊節點數組，例如 state.expanded = false

$('#tree').treeview('getCollapsed', nodeId);

getDisabled()

返回禁用的節點數組，例如 state.disabled = true

$('#tree').treeview('getDisabled', nodeId);

getEnabled()

返回已啟用節點的數組，例如 state.disabled = false

$('#tree').treeview('getEnabled', nodeId);

getExpanded()

返回一個展開的節點數組，例如 state.expanded = true

$('#tree').treeview('getExpanded', nodeId);

getNode(nodeId)

返回與給定節點ID相匹配的單個節點對象.

$('#tree').treeview('getNode', nodeId);

getParent(node | nodeId)

返回給定節點的父節點，否則返回undefined

$('#tree').treeview('getParent', node);

getSelected()

返回選定節點的數組，例如 state.selected = true

$('#tree').treeview('getSelected', nodeId);

getSiblings(node | nodeId)

返回給定節點的兄弟節點數組，如果有效則返回undefined

$('#tree').treeview('getSiblings', node);

getUnselected()

返回未選定節點的數組，例如 state.selected = false

$('#tree').treeview('getUnselected', nodeId);

remove()

刪除樹視圖組件。 刪除附加事件，內部附加對象和添加的HTML元素

$('#tree').treeview('remove');

revealNode(node | nodeId, options)

顯示給定的樹節點，將樹從節點擴展到根

$('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);

Triggers nodeExpanded event; pass silent to suppress events.

search(pattern, options)

在樹視圖中搜索與給定字符串匹配的節點，並在樹中突出顯示它們。

返回匹配節點的數組

$('#tree').treeview('search', [ 'Parent', { ignoreCase: true, // case insensitive exactMatch: false, // like or equals revealResults: true, // reveal matching nodes }]);

Triggers searchComplete event

selectNode(node | nodeId, options)

選擇給定的樹節點，接受節點或nodeId

$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);

Triggers nodeSelected event; pass silent to suppress events.

toggleNodeChecked(node | nodeId, options)

切換節點檢查狀態; 檢查是否未選中，如果選中取消選中

$('#tree').treeview('toggleNodeChecked', [ nodeId, { silent: true } ]);

Triggers either nodeChecked or nodeUnchecked event; pass silent to suppress events.

toggleNodeDisabled(node | nodeId, options)

切換節點禁用狀態; 禁用如果啟用，啟用如果禁用

$('#tree').treeview('toggleNodeDisabled', [ nodeId, { silent: true } ]);

Triggers either nodeDisabled or nodeEnabled event; pass silent to suppress events.

toggleNodeExpanded(node | nodeId, options)

切換節點展開狀態; 如果展開則折疊，如果折疊則展開

$('#tree').treeview('toggleNodeExpanded', [ nodeId, { silent: true } ]);

Triggers either nodeExpanded or nodeCollapsed event; pass silent to suppress events.

toggleNodeSelected(node | nodeId, options)

切換節點選擇狀態; 選擇是否取消選擇，取消選擇

$('#tree').treeview('toggleNodeSelected', [ nodeId, { silent: true } ]);

Triggers either nodeSelected or nodeUnselected event; pass silent to suppress events.

uncheckAll(options)

取消選中所有的樹節點

$('#tree').treeview('uncheckAll', { silent: true });

Triggers nodeUnchecked event; pass silent to suppress events.

uncheckNode(node | nodeId, options)

取消給定的樹節點，接受節點或nodeId

$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);

Triggers nodeUnchecked event; pass silent to suppress events.

unselectNode(node | nodeId, options)

取消選擇給定的樹節點，接受節點或nodeId

$('#tree').treeview('unselectNode', [ nodeId, { silent: true } ]);

Triggers nodeUnselected event; pass silent to suppress events.

Events 事件

提供事件以便您的應用程序可以響應樹視圖狀態中的更改。 例如，如果要在選擇節點時更新顯示，請使用nodeSelected事件。

您可以通過使用選項回調處理程序或標准jQuery .on方法來綁定到以下定義的任何事件。

使用選項回調處理程序的示例：

$('#tree').treeview({ 

//回調的命名約定是用`on`預先設置的
   //並大寫事件名稱的第一個字母
   //例如 nodeSelected - > onNodeSelected

 onNodeSelected: function(event, data) { // Your logic goes here });

並使用jQuery .on方法

$('#tree').on('nodeSelected', function(event, data) { // Your logic goes here });

List of Events

nodeChecked (event, node) - 節點被選中

nodeCollapsed (event, node) - 節點已折疊

nodeDisabled (event, node) -一個節點被禁用

nodeEnabled (event, node) - 節點已啟用

nodeExpanded (event, node) - 節點被展開

nodeSelected (event, node) - 節點被選中

nodeUnchecked (event, node) - 一個節點沒有被選中

nodeUnselected (event, node) - 節點未被選中

searchComplete (event, results) - 搜索完成后

searchCleared (event, results) - 搜索結果被清除后

 

================================================================================================================

一點個人經驗：