基于bootstrap的jQuery多級清單樹插件 treeview

http://www.cnblogs.com/mfc-itblog/p/5233453.html

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

http://www.htmleaf.com/Demo/201502141380.html

簡要教程

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多級清單樹插件。該jQuery插件基于Twitter Bootstrap，以簡單和優雅的方式來顯示一些繼承樹結構，如視圖樹、清單樹等等。

插件依賴

Bootstrap v3.0.3
jQuery v2.0.3

以上兩個外部依賴檔案已經經過測試可以正常使用，其他版本的Bootstrap需要另行測試。該插件不支援bootstrap 2。

使用方法

首先要在頁面中引入依賴檔案和 bootstrap-treeview.js檔案。

<!-- Required Stylesheets -->

link

href

"./css/bootstrap.css"

rel

"stylesheet"

<!-- Required Javascript -->

script

src

"./js/jquery.js"

></

script

script

src

"./js/bootstrap-treeview.js"

></

script

HTML結構

可以使用任何HTML DOM元素來作為該清單樹的容器：

div

id

"tree"

></

div

調用插件

該清單樹插件最基本的調用方法如下：

function

getTree() {

// Some logic to retrieve, or generate tree structure

return

data;

$(

'#tree'

).treeview({data: getTree()});

資料結構

為了建立樹的繼承結構，需要為該清單樹插件提供一個嵌套結構的js對象。例如：

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"

];

最簡單的樹結構可以隻有一個節點，使用一個帶

text

屬性的js對象來實作即可：

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: [

{},

...

節點屬性

下面的參數可用于樹節點的屬性定義，如節點的文本、顔色和标簽等。

參數名稱	參數類型	參數描述
text	String(必選項)	清單樹節點上的文本，通常是節點右邊的小圖示。
icon	String(可選項)	清單樹節點上的圖示，通常是節點左邊的圖示。
selectedIcon	String(可選項)	當某個節點被選擇後顯示的圖示，通常是節點左邊的圖示。
href	String(可選項)	結合全局enableLinks選項為清單樹節點指定URL。
selectable	Boolean. Default: true	指定清單樹的節點是否可選擇。設定為 `false` 将使節點展開，并且不能被選擇。
state	Object(可選項)	一個節點的初始狀态。
state.checked	Boolean，預設值 `false`	訓示一個節點是否處于checked狀态，用一個checkbox圖示表示。
state.disabled	Boolean，預設值 `false`	訓示一個節點是否處于disabled狀态。（不是selectable，expandable或checkable）
state.expanded	Boolean，預設值 `false`	訓示一個節點是否處于展開狀态。
state.selected	Boolean，預設值 `false`	訓示一個節點是否可以被選擇。
color	String. Optional	節點的前景色，覆寫全局的前景色選項。
backColor	String. Optional	節點的背景色，覆寫全局的背景色選項。
tags	Array of Strings. Optional	通過結合全局showTags選項來在清單樹節點的右邊添加額外的資訊。

全局參數

參數可以定制treeview的預設外觀和行為。參數使用一個對象來在插件初始化時傳入：

// Example: initializing the treeview

// expanded to 5 levels

// with a background color of green

$(

'#tree'

).treeview({

data: data,

// data is not optional

levels: 5,

backColor:

'green'

});

參數名稱	參數類型	預設值	描述
data	Array of Objects	無	清單樹上顯示的資料。
backColor	String	所有合法的顔色值，Default: inherits from Bootstrap.css。	設定所有清單樹節點的背景顔色。
borderColor	String	所有合法的顔色值，Default: inherits from Bootstrap.css。	設定清單樹容器的邊框顔色，如果不想要邊框可以設定 `showBorder` 屬性為false。
checkedIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-check"	設定處于checked狀态的複選框圖示。
collapseIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-minus"	設定清單樹可收縮節點的圖示。
color	String	所有合法的顔色值，Default: inherits from Bootstrap.css。	設定清單樹所有節點的前景色。
emptyIcon	String：class名稱	Bootstrap Glyphicons定義的"glyphicon"。	設定清單樹中沒有子節點的節點的圖示。
enableLinks	Boolean	false	是否使用目前節點的文本作為超連結。超連結的 `href` 值必須在每個節點的data結構中給出。
expandIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-plus"	設定清單樹可展開節點的圖示。
highlightSearchResults	Boolean	true	是否高亮搜尋結果。
highlightSelected	Boolean	true	當選擇節點時是否高亮顯示。
onhoverColor	String	所有合法的顔色值， Default: '#F5F5F5'。	設定清單樹的節點在使用者滑鼠滑過時的背景顔色。
levels	Integer	Default: 2	設定繼承樹預設展開的級别。
multiSelect	Boolean	false	是否可以同時選擇多個節點。
nodeIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-stop"	設定所有清單樹節點上的預設圖示。
selectedIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-stop"	設定所有被選擇的節點上的預設圖示。
searchResultBackColor	String	所有合法的顔色值， Default: undefined, inherits。	設定搜尋結果節點的背景顔色。
searchResultColor	String	所有合法的顔色值， Default: '#D9534F'	設定搜尋結果節點的前景顔色。
selectedBackColor	String	所有合法的顔色值， Default: '#428bca'	設定被選擇節點的背景顔色。
selectedColor	String	所有合法的顔色值， Default: '#FFFFFF'。	設定清單樹選擇節點的背景顔色。
showBorder	Boolean	true	是否在節點上顯示邊框。
showCheckbox	Boolean	false	是否在節點上顯示checkboxes。
showIcon	Boolean	true	是否顯示節點圖示。
showTags	Boolean	false	是否在每個節點右邊顯示tags标簽。tag值必須在每個清單樹的data結構中給出。
uncheckedIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-unchecked"	設定圖示為未選擇狀态的checkbox圖示。

可用方法

你可以通過兩種方式來調用方法：

1、插件包裝器：插件的包裝器可以作為通路底層方法的代理。

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

多個參數必須使用數組對象來傳入。

2、直接使用treeview：你可以通過下面兩種方法中的一種來擷取treeview對象執行個體。

//該方法傳回一個treeview的對象執行個體

$(

'#tree'

).treeview(

true

.methodName(args);

//對象執行個體也儲存在DOM元素的data中，

//可以使用'treeview'的id來通路它。

$(

'#tree'

).data(

'treeview'

.methodName(args);

treeview方法清單

checkAll(options) ：選擇所有的節點。

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

觸發 nodeChecked 事件，傳入 silent 來阻止其它事件。
checkNode(node | nodeId, options) ：選擇指定的節點，接收節點或節點ID。

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

觸發 nodeChecked 事件，傳入 silent 來阻止其它事件。
clearSearch() ：清空以前的搜尋結果。例如清除它們的高亮狀态。

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

觸發 searchCleared 事件。
collapseAll(options) ：折疊所有的節點，折疊整個樹。

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

觸發 nodeCollapsed 事件，傳入 silent 來阻止其它事件。

collapseNode(node | nodeId, options)

：折疊指定節點和它的子節點。如果不想折疊子節點，可以設定

{ ignoreChildren: true }

。

$(

'#tree'

).treeview(

'collapseNode'

, [ nodeId, { silent:

true

, ignoreChildren:

false

} ]);

觸發

nodeCollapsed

事件，傳入

silent

來阻止其它事件。

disableAll(options) ：禁用所有的節點。

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

觸發 nodeDisabled 事件，傳入 silent 來阻止其它事件。
disableNode(node | nodeId, options) ：禁用指定的節點，接收節點或節點ID。

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

觸發 nodeDisabled 事件，傳入 silent 來阻止其它事件。
enableAll(options) ：啟用所有的節點。

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

觸發 nodeEnabled 事件，傳入 silent 來阻止其它事件。
enableNode(node | nodeId, options) ：啟用指定的節點，接收節點或節點ID。

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

觸發 nodeEnabled 事件，傳入 silent 來阻止其它事件。
expandAll(options) ：展開所有的樹節點。也可以展開任何給定級别的樹節點。

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

觸發 nodeExpanded 事件，傳入 silent 來阻止其它事件。
expandNode(node | nodeId, options) ：展開指定的樹節點，接收節點或節點ID。也可以展開任何給定級别的樹節點。

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

觸發 nodeExpanded 事件，傳入 silent 來阻止其它事件。
getCollapsed() ：傳回折疊節點的數組。例如 state.expanded = false 。

$( '#tree' ).treeview( 'getCollapsed' , nodeId);
getDisabled() ：傳回被禁用節點的數組。

$( '#tree' ).treeview( 'getDisabled' , nodeId);
getEnabled() ：傳回可用節點的數組。

$( '#tree' ).treeview( 'getEnabled' , nodeId);
getExpanded() ：傳回所有展開節點的數組。

$( '#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 } ]);

觸發 nodeExpanded 事件，傳入 silent 來阻止其它事件。

search(pattern, options)

：搜尋比對是非常的指定樹節點，并高亮它們。傳回配平節點的數組。

$(

'#tree'

).treeview(

'search'

, [

'Parent'

, {

ignoreCase:

true

// case insensitive

exactMatch:

false

// like or equals

revealResults:

true

// reveal matching nodes

}]);

觸發

searchComplete

事件。

selectNode(node | nodeId, options) ：選擇一個給定的樹節點，接收節點或節點ID。

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

觸發 nodeSelected 事件，傳入 silent 來阻止其它事件。
toggleNodeChecked(node | nodeId, options) ：切換節點的Check狀态。

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

觸發 nodeChecked 事件或 nodeUnchecked 事件，傳入 silent 來阻止其它事件。
toggleNodeDisabled(node | nodeId, options) ：切換一個節點的可用和不可用狀态。

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

觸發 nodeDisabled 事件或 nodeEnabled 事件，傳入 silent 來阻止其它事件。
toggleNodeExpanded(node | nodeId, options) ：切換一個節點的展開和折疊狀态。

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

觸發 nodeExpanded 事件或 nodeCollapsed 事件，傳入 silent 來阻止其它事件。
toggleNodeSelected(node | nodeId, options) ：切換一個節點的選擇狀态。

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

觸發 nodeSelected 事件或 nodeUnselected 事件，傳入 silent 來阻止其它事件。
uncheckAll(options) ：Uncheck所有的節點。

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

觸發 nodeUnchecked 事件，傳入 silent 來阻止其它事件。
uncheckNode(node | nodeId, options) ：Uncheck一個給定的節點，接收節點或節點ID。

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

觸發 nodeUnchecked 事件，傳入 silent 來阻止其它事件。
unselectNode(node | nodeId, options) ：不選擇指定的節點，接收節點或節點ID。

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

觸發 nodeUnselected 事件，傳入 silent 來阻止其它事件。

事件

你可以在參數中使用回調函數來綁定任何事件，或者使用标準的jQuery

.on()

方法來綁定事件。

在參數中調用的示例：

$(

'#tree'

).treeview({

// The naming convention for callback's is to prepend with `on`

// and capitalize the first letter of the event name

// e.g. nodeSelected -> onNodeSelected

onNodeSelected:

function

(event, data) {

// 事件代碼...

});

使用jQuery

.on

方法：

$(

'#tree'

).on(

'nodeSelected'

function

(event, data) {

// 事件代碼...

});

可用事件清單

nodeChecked (event, node) ：一個節點被checked。
nodeCollapsed (event, node) ：一個節點被折疊。
nodeDisabled (event, node) ：一個節點被禁用。
nodeEnabled (event, node) ：一個節點被啟用。
nodeExpanded (event, node) ：一個節點被展開。
nodeSelected (event, node) ：一個節點被選擇。
nodeUnchecked (event, node) ：一個節點被unchecked。
nodeUnselected (event, node) ：取消選擇一個節點。
searchComplete (event, results) ：搜尋完成之後觸發。
searchCleared (event, results) ：搜尋結果被清除之後觸發。

本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html