簡要教程

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多級列表樹插件。該jQuery插件基于Twitter Bootstrap，以簡單和優(yōu)雅的方式來顯示一些繼承樹結(jié)構(gòu)，如視圖樹、列表樹等等。

插件依賴

• Bootstrap v3.0.3
• jQuery v2.0.3

以上兩個外部依賴文件已經(jīng)經(jīng)過測試可以正常使用，其他版本的Bootstrap需要另行測試。該插件不支持bootstrap 2。

使用方法

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

<!-- Required Stylesheets --> <linkhref="./css/bootstrap.css"rel="stylesheet"> <!-- Required Javascript --> <scriptsrc="./js/jquery.js"></script> <scriptsrc="./js/bootstrap-treeview.js"></script>?????????????????

HTML結(jié)構(gòu)

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

<divid="tree"></div>?????????????????

調(diào)用插件

該列表樹插件最基本的調(diào)用方法如下：

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

數(shù)據(jù)結(jié)構(gòu)

為了創(chuàng)建樹的繼承結(jié)構(gòu)，需要為該列表樹插件提供一個嵌套結(jié)構(gòu)的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" ??} ];?????????????????

最簡單的樹結(jié)構(gòu)可以只有一個節(jié)點，使用一個帶text屬性的js對象來實現(xiàn)即可：

{ ????text:"Node 1" }?????????????????

如果你需要自定義更多的內(nèi)容，可以參考下面：

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

節(jié)點屬性

下面的參數(shù)可用于樹節(jié)點的屬性定義，如節(jié)點的文本、顏色和標(biāo)簽等。

參數(shù)名稱	參數(shù)類型	參數(shù)描述
text	String(必選項)	列表樹節(jié)點上的文本，通常是節(jié)點右邊的小圖標(biāo)。
icon	String(可選項)	列表樹節(jié)點上的圖標(biāo)，通常是節(jié)點左邊的圖標(biāo)。
selectedIcon	String(可選項)	當(dāng)某個節(jié)點被選擇后顯示的圖標(biāo)，通常是節(jié)點左邊的圖標(biāo)。
href	String(可選項)	結(jié)合全局enableLinks選項為列表樹節(jié)點指定URL。
selectable	Boolean. Default: true	指定列表樹的節(jié)點是否可選擇。設(shè)置為false將使節(jié)點展開，并且不能被選擇。
state	Object(可選項)	一個節(jié)點的初始狀態(tài)。
state.checked	Boolean，默認(rèn)值false	指示一個節(jié)點是否處于checked狀態(tài)，用一個checkbox圖標(biāo)表示。
state.disabled	Boolean，默認(rèn)值false	指示一個節(jié)點是否處于disabled狀態(tài)。（不是selectable，expandable或checkable）
state.expanded	Boolean，默認(rèn)值false	指示一個節(jié)點是否處于展開狀態(tài)。
state.selected	Boolean，默認(rèn)值false	指示一個節(jié)點是否可以被選擇。
color	String. Optional	節(jié)點的前景色，覆蓋全局的前景色選項。
backColor	String. Optional	節(jié)點的背景色，覆蓋全局的背景色選項。
tags	Array of Strings. Optional	通過結(jié)合全局showTags選項來在列表樹節(jié)點的右邊添加額外的信息。

全局參數(shù)

參數(shù)可以定制treeview的默認(rèn)外觀和行為。參數(shù)使用一個對象來在插件初始化時傳入：

// 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' });?????????????????

參數(shù)名稱	參數(shù)類型	默認(rèn)值	描述
data	Array of Objects	無	列表樹上顯示的數(shù)據(jù)。
backColor	String	所有合法的顏色值，Default: inherits from Bootstrap.css。	設(shè)置所有列表樹節(jié)點的背景顏色。
borderColor	String	所有合法的顏色值，Default: inherits from Bootstrap.css。	設(shè)置列表樹容器的邊框顏色，如果不想要邊框可以設(shè)置showBorder屬性為false。
checkedIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-check"	設(shè)置處于checked狀態(tài)的復(fù)選框圖標(biāo)。
collapseIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-minus"	設(shè)置列表樹可收縮節(jié)點的圖標(biāo)。
color	String	所有合法的顏色值，Default: inherits from Bootstrap.css。	設(shè)置列表樹所有節(jié)點的前景色。
emptyIcon	String：class名稱	Bootstrap Glyphicons定義的"glyphicon"。	設(shè)置列表樹中沒有子節(jié)點的節(jié)點的圖標(biāo)。
enableLinks	Boolean	false	是否使用當(dāng)前節(jié)點的文本作為超鏈接。超鏈接的href值必須在每個節(jié)點的data結(jié)構(gòu)中給出。
expandIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-plus"	設(shè)置列表樹可展開節(jié)點的圖標(biāo)。
highlightSearchResults	Boolean	true	是否高亮搜索結(jié)果。
highlightSelected	Boolean	true	當(dāng)選擇節(jié)點時是否高亮顯示。
onhoverColor	String	所有合法的顏色值， Default: '#F5F5F5'。	設(shè)置列表樹的節(jié)點在用戶鼠標(biāo)滑過時的背景顏色。
levels	Integer	Default: 2	設(shè)置繼承樹默認(rèn)展開的級別。
multiSelect	Boolean	false	是否可以同時選擇多個節(jié)點。
nodeIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-stop"	設(shè)置所有列表樹節(jié)點上的默認(rèn)圖標(biāo)。
selectedIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-stop"	設(shè)置所有被選擇的節(jié)點上的默認(rèn)圖標(biāo)。
searchResultBackColor	String	所有合法的顏色值， Default: undefined, inherits。	設(shè)置搜索結(jié)果節(jié)點的背景顏色。
searchResultColor	String	所有合法的顏色值， Default: '#D9534F'	設(shè)置搜索結(jié)果節(jié)點的前景顏色。
selectedBackColor	String	所有合法的顏色值， Default: '#428bca'	設(shè)置被選擇節(jié)點的背景顏色。
selectedColor	String	所有合法的顏色值， Default: '#FFFFFF'。	設(shè)置列表樹選擇節(jié)點的背景顏色。
showBorder	Boolean	true	是否在節(jié)點上顯示邊框。
showCheckbox	Boolean	false	是否在節(jié)點上顯示checkboxes。
showIcon	Boolean	true	是否顯示節(jié)點圖標(biāo)。
showTags	Boolean	false	是否在每個節(jié)點右邊顯示tags標(biāo)簽。tag值必須在每個列表樹的data結(jié)構(gòu)中給出。
uncheckedIcon	String：class名稱	Bootstrap Glyphicons定義的 "glyphicon glyphicon-unchecked"	設(shè)置圖標(biāo)為未選擇狀態(tài)的checkbox圖標(biāo)。

可用方法

你可以通過兩種方式來調(diào)用方法：

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

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

  多個參數(shù)必須使用數(shù)組對象來傳入。

• 2、直接使用treeview：你可以通過下面兩種方法中的一種來獲取treeview對象實例。

  //該方法返回一個treeview的對象實例 $('#tree').treeview(true) ??.methodName(args); //對象實例也保存在DOM元素的data中， //可以使用'treeview'的id來訪問它。 $('#tree').data('treeview') ??.methodName(args);?

treeview方法列表

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

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

  觸發(fā)nodeChecked事件，傳入silent來阻止其它事件。

• checkNode(node | nodeId, options)：選擇指定的節(jié)點，接收節(jié)點或節(jié)點ID。

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

  觸發(fā)nodeChecked事件，傳入silent來阻止其它事件。

• clearSearch()：清空以前的搜索結(jié)果。例如清除它們的高亮狀態(tài)。

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

  觸發(fā)searchCleared事件。

• collapseAll(options)：折疊所有的節(jié)點，折疊整個樹。

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

  觸發(fā)nodeCollapsed事件，傳入silent來阻止其它事件。

• collapseNode(node | nodeId, options)：折疊指定節(jié)點和它的子節(jié)點。如果不想折疊子節(jié)點，可以設(shè)置{ ignoreChildren: true }。

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

  觸發(fā)nodeCollapsed事件，傳入silent來阻止其它事件。

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

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

  觸發(fā)nodeDisabled事件，傳入silent來阻止其它事件。

• disableNode(node | nodeId, options)：禁用指定的節(jié)點，接收節(jié)點或節(jié)點ID。

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

  觸發(fā)nodeDisabled事件，傳入silent來阻止其它事件。

• enableAll(options)：啟用所有的節(jié)點。

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

  觸發(fā)nodeEnabled事件，傳入silent來阻止其它事件。

• enableNode(node | nodeId, options)：啟用指定的節(jié)點，接收節(jié)點或節(jié)點ID。

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

  觸發(fā)nodeEnabled事件，傳入silent來阻止其它事件。

• expandAll(options)：展開所有的樹節(jié)點。也可以展開任何給定級別的樹節(jié)點。

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

  觸發(fā)nodeExpanded事件，傳入silent來阻止其它事件。

• expandNode(node | nodeId, options)：展開指定的樹節(jié)點，接收節(jié)點或節(jié)點ID。也可以展開任何給定級別的樹節(jié)點。

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

  觸發(fā)nodeExpanded事件，傳入silent來阻止其它事件。

• getCollapsed()：返回折疊節(jié)點的數(shù)組。例如state.expanded = false。

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

• getDisabled()：返回被禁用節(jié)點的數(shù)組。

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

• getEnabled()：返回可用節(jié)點的數(shù)組。

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

• getExpanded()：返回所有展開節(jié)點的數(shù)組。

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

• getNode(nodeId)：返回給定節(jié)點ID的單一節(jié)點對象。

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

• getParent(node | nodeId)：返回給定節(jié)點的父節(jié)點，如果沒有則返回undefined。

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

• getSelected()：返回所有被選擇節(jié)點的數(shù)組，例如：state.selected = true。

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

• getSiblings(node | nodeId)：返回給定節(jié)點的兄弟節(jié)點的數(shù)組，如果沒有則返回undefined。

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

• getUnselected()：返回沒有被選擇節(jié)點的數(shù)組。例如：state.selected = false。

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

• remove()：移除列表樹容器。移除附加的事件、附加對象和額外的html元素。

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

• revealNode(node | nodeId, options)：顯示一個樹節(jié)點，展開從這個節(jié)點開始到根節(jié)點的所有節(jié)點。

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

  觸發(fā)nodeExpanded事件，傳入silent來阻止其它事件。

• search(pattern, options)：搜索匹配是非常的指定樹節(jié)點，并高亮它們。返回配平節(jié)點的數(shù)組。

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

  觸發(fā)searchComplete事件。

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

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

  觸發(fā)nodeSelected事件，傳入silent來阻止其它事件。

• toggleNodeChecked(node | nodeId, options)：切換節(jié)點的Check狀態(tài)。

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

  觸發(fā)nodeChecked事件或nodeUnchecked事件，傳入silent來阻止其它事件。

• toggleNodeDisabled(node | nodeId, options)：切換一個節(jié)點的可用和不可用狀態(tài)。

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

  觸發(fā)nodeDisabled事件或nodeEnabled事件，傳入silent來阻止其它事件。

• toggleNodeExpanded(node | nodeId, options)：切換一個節(jié)點的展開和折疊狀態(tài)。

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

  觸發(fā)nodeExpanded事件或nodeCollapsed事件，傳入silent來阻止其它事件。

• toggleNodeSelected(node | nodeId, options)：切換一個節(jié)點的選擇狀態(tài)。

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

  觸發(fā)nodeSelected事件或nodeUnselected事件，傳入silent來阻止其它事件。

• uncheckAll(options)：Uncheck所有的節(jié)點。

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

  觸發(fā)nodeUnchecked事件，傳入silent來阻止其它事件。

• uncheckNode(node | nodeId, options)：Uncheck一個給定的節(jié)點，接收節(jié)點或節(jié)點ID。

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

  觸發(fā)nodeUnchecked事件，傳入silent來阻止其它事件。

• unselectNode(node | nodeId, options)：不選擇指定的節(jié)點，接收節(jié)點或節(jié)點ID。

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

  觸發(fā)nodeUnselected事件，傳入silent來阻止其它事件。

事件

你可以在參數(shù)中使用回調(diào)函數(shù)來綁定任何事件，或者使用標(biāo)準(zhǔn)的jQuery?.on()方法來綁定事件。

在參數(shù)中調(diào)用的示例：

$('#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)：一個節(jié)點被checked。
• nodeCollapsed (event, node)：一個節(jié)點被折疊。
• nodeDisabled (event, node)：一個節(jié)點被禁用。
• nodeEnabled (event, node)：一個節(jié)點被啟用。
• nodeExpanded (event, node)：一個節(jié)點被展開。
• onNodeSelected(event, node)：一個節(jié)點被選擇。
• nodeUnchecked (event, node)：一個節(jié)點被unchecked。
• nodeUnselected (event, node)：取消選擇一個節(jié)點。
• searchComplete (event, results)：搜索完成之后觸發(fā)。
• searchCleared (event, results)：搜索結(jié)果被清除之后觸發(fā)。

轉(zhuǎn)載于:https://www.cnblogs.com/niuniu0108/p/7791966.html

總結(jié)

以上是生活随笔為你收集整理的bootStrap-treeview插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。