基于bootstrap的jQuery多級(jí)列表樹(shù)插件

簡(jiǎn)要教程

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

插件依賴(lài)

Bootstrap v3.0.3

jQuery v2.0.3

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

使用方法

首先要在頁(yè)面中引入依賴(lài)文件和 bootstrap-treeview.js文件。

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

可以使用任何HTML DOM元素來(lái)作為該列表樹(shù)的容器：

調(diào)用插件

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

functiongetTree() {

// Some logic to retrieve, or generate tree structure

returndata;

}

$('#tree').treeview({data: getTree()});

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

為了創(chuàng)建樹(shù)的繼承結(jié)構(gòu)，需要為該列表樹(shù)插件提供一個(gè)嵌套結(jié)構(gòu)的js對(duì)象。例如：

vartree = [

{

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ǎn)單的樹(shù)結(jié)構(gòu)可以只有一個(gè)節(jié)點(diǎn)，使用一個(gè)帶text屬性的js對(duì)象來(lái)實(shí)現(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é)點(diǎn)屬性

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

參數(shù)名稱(chēng)參數(shù)類(lèi)型參數(shù)描述

textString(必選項(xiàng))列表樹(shù)節(jié)點(diǎn)上的文本，通常是節(jié)點(diǎn)右邊的小圖標(biāo)。

iconString(可選項(xiàng))列表樹(shù)節(jié)點(diǎn)上的圖標(biāo)，通常是節(jié)點(diǎn)左邊的圖標(biāo)。

selectedIconString(可選項(xiàng))當(dāng)某個(gè)節(jié)點(diǎn)被選擇后顯示的圖標(biāo)，通常是節(jié)點(diǎn)左邊的圖標(biāo)。

hrefString(可選項(xiàng))結(jié)合全局enableLinks選項(xiàng)為列表樹(shù)節(jié)點(diǎn)指定URL。

selectableBoolean. Default: true指定列表樹(shù)的節(jié)點(diǎn)是否可選擇。設(shè)置為false將使節(jié)點(diǎn)展開(kāi)，并且不能被選擇。

stateObject(可選項(xiàng))一個(gè)節(jié)點(diǎn)的初始狀態(tài)。

state.checkedBoolean，默認(rèn)值false指示一個(gè)節(jié)點(diǎn)是否處于checked狀態(tài)，用一個(gè)checkbox圖標(biāo)表示。

state.disabledBoolean，默認(rèn)值false指示一個(gè)節(jié)點(diǎn)是否處于disabled狀態(tài)。（不是selectable，expandable或checkable）

state.expandedBoolean，默認(rèn)值false指示一個(gè)節(jié)點(diǎn)是否處于展開(kāi)狀態(tài)。

state.selectedBoolean，默認(rèn)值false指示一個(gè)節(jié)點(diǎn)是否可以被選擇。

colorString. Optional節(jié)點(diǎn)的前景色，覆蓋全局的前景色選項(xiàng)。

backColorString. Optional節(jié)點(diǎn)的背景色，覆蓋全局的背景色選項(xiàng)。

tagsArray of Strings. Optional通過(guò)結(jié)合全局showTags選項(xiàng)來(lái)在列表樹(shù)節(jié)點(diǎn)的右邊添加額外的信息。

全局參數(shù)

參數(shù)可以定制treeview的默認(rèn)外觀和行為。參數(shù)使用一個(gè)對(duì)象來(lái)在插件初始化時(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ù)名稱(chēng)參數(shù)類(lèi)型默認(rèn)值描述

dataArray of Objects無(wú)列表樹(shù)上顯示的數(shù)據(jù)。

backColorString所有合法的顏色值，Default: inherits from Bootstrap.css。設(shè)置所有列表樹(shù)節(jié)點(diǎn)的背景顏色。

borderColorString所有合法的顏色值，Default: inherits from Bootstrap.css。設(shè)置列表樹(shù)容器的邊框顏色，如果不想要邊框可以設(shè)置showBorder屬性為false。

checkedIconString：class名稱(chēng)Bootstrap Glyphicons定義的 "glyphicon glyphicon-check"設(shè)置處于checked狀態(tài)的復(fù)選框圖標(biāo)。

collapseIconString：class名稱(chēng)Bootstrap Glyphicons定義的 "glyphicon glyphicon-minus"設(shè)置列表樹(shù)可收縮節(jié)點(diǎn)的圖標(biāo)。

colorString所有合法的顏色值，Default: inherits from Bootstrap.css。設(shè)置列表樹(shù)所有節(jié)點(diǎn)的前景色。

emptyIconString：class名稱(chēng)Bootstrap Glyphicons定義的"glyphicon"。設(shè)置列表樹(shù)中沒(méi)有子節(jié)點(diǎn)的節(jié)點(diǎn)的圖標(biāo)。

enableLinksBooleanfalse是否使用當(dāng)前節(jié)點(diǎn)的文本作為超鏈接。超鏈接的href值必須在每個(gè)節(jié)點(diǎn)的data結(jié)構(gòu)中給出。

expandIconString：class名稱(chēng)Bootstrap Glyphicons定義的 "glyphicon glyphicon-plus"設(shè)置列表樹(shù)可展開(kāi)節(jié)點(diǎn)的圖標(biāo)。

highlightSearchResultsBooleantrue是否高亮搜索結(jié)果。

highlightSelectedBooleantrue當(dāng)選擇節(jié)點(diǎn)時(shí)是否高亮顯示。

onhoverColorString所有合法的顏色值， Default: '#F5F5F5'。設(shè)置列表樹(shù)的節(jié)點(diǎn)在用戶(hù)鼠標(biāo)滑過(guò)時(shí)的背景顏色。

levelsIntegerDefault: 2設(shè)置繼承樹(shù)默認(rèn)展開(kāi)的級(jí)別。

multiSelectBooleanfalse是否可以同時(shí)選擇多個(gè)節(jié)點(diǎn)。

nodeIconString：class名稱(chēng)Bootstrap Glyphicons定義的 "glyphicon glyphicon-stop"設(shè)置所有列表樹(shù)節(jié)點(diǎn)上的默認(rèn)圖標(biāo)。

selectedIconString：class名稱(chēng)Bootstrap Glyphicons定義的 "glyphicon glyphicon-stop"設(shè)置所有被選擇的節(jié)點(diǎn)上的默認(rèn)圖標(biāo)。

searchResultBackColorString所有合法的顏色值， Default: undefined, inherits。設(shè)置搜索結(jié)果節(jié)點(diǎn)的背景顏色。

searchResultColorString所有合法的顏色值， Default: '#D9534F'設(shè)置搜索結(jié)果節(jié)點(diǎn)的前景顏色。

selectedBackColorString所有合法的顏色值， Default: '#428bca'設(shè)置被選擇節(jié)點(diǎn)的背景顏色。

selectedColorString所有合法的顏色值， Default: '#FFFFFF'。設(shè)置列表樹(shù)選擇節(jié)點(diǎn)的背景顏色。

showBorderBooleantrue是否在節(jié)點(diǎn)上顯示邊框。

showCheckboxBooleanfalse是否在節(jié)點(diǎn)上顯示checkboxes。

showIconBooleantrue是否顯示節(jié)點(diǎn)圖標(biāo)。

showTagsBooleanfalse是否在每個(gè)節(jié)點(diǎn)右邊顯示tags標(biāo)簽。tag值必須在每個(gè)列表樹(shù)的data結(jié)構(gòu)中給出。

uncheckedIconString：class名稱(chēng)Bootstrap Glyphicons定義的 "glyphicon glyphicon-unchecked"設(shè)置圖標(biāo)為未選擇狀態(tài)的checkbox圖標(biāo)。

可用方法

你可以通過(guò)兩種方式來(lái)調(diào)用方法：

1、插件包裝器：插件的包裝器可以作為訪問(wèn)底層方法的代理。

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

多個(gè)參數(shù)必須使用數(shù)組對(duì)象來(lái)傳入。

2、直接使用treeview：你可以通過(guò)下面兩種方法中的一種來(lái)獲取treeview對(duì)象實(shí)例。

//該方法返回一個(gè)treeview的對(duì)象實(shí)例

$('#tree').treeview(true)

.methodName(args);

//對(duì)象實(shí)例也保存在DOM元素的data中，

//可以使用'treeview'的id來(lái)訪問(wèn)它。

$('#tree').data('treeview')

.methodName(args);

treeview方法列表

checkAll(options)：選擇所有的節(jié)點(diǎn)。

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

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

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

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

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

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

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

觸發(fā)searchCleared事件。

collapseAll(options)：折疊所有的節(jié)點(diǎn)，折疊整個(gè)樹(shù)。

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

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

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

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

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

disableAll(options)：禁用所有的節(jié)點(diǎn)。

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

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

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

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

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

enableAll(options)：?jiǎn)⒂盟械墓?jié)點(diǎn)。

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

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

enableNode(node | nodeId, options)：?jiǎn)⒂弥付ǖ墓?jié)點(diǎn)，接收節(jié)點(diǎn)或節(jié)點(diǎn)ID。

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

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

expandAll(options)：展開(kāi)所有的樹(shù)節(jié)點(diǎn)。也可以展開(kāi)任何給定級(jí)別的樹(shù)節(jié)點(diǎn)。

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

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

expandNode(node | nodeId, options)：展開(kāi)指定的樹(shù)節(jié)點(diǎn)，接收節(jié)點(diǎn)或節(jié)點(diǎn)ID。也可以展開(kāi)任何給定級(jí)別的樹(shù)節(jié)點(diǎn)。

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

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

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

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

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

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

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

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

getExpanded()：返回所有展開(kāi)節(jié)點(diǎn)的數(shù)組。

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

getNode(nodeId)：返回給定節(jié)點(diǎn)ID的單一節(jié)點(diǎn)對(duì)象。

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

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

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

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

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

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

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

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

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

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

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

revealNode(node | nodeId, options)：顯示一個(gè)樹(shù)節(jié)點(diǎn)，展開(kāi)從這個(gè)節(jié)點(diǎn)開(kāi)始到根節(jié)點(diǎn)的所有節(jié)點(diǎn)。

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

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

search(pattern, options)：搜索匹配是非常的指定樹(shù)節(jié)點(diǎn)，并高亮它們。返回配平節(jié)點(diǎn)的數(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)：選擇一個(gè)給定的樹(shù)節(jié)點(diǎn)，接收節(jié)點(diǎn)或節(jié)點(diǎn)ID。

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

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

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

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

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

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

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

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

toggleNodeExpanded(node | nodeId, options)：切換一個(gè)節(jié)點(diǎn)的展開(kāi)和折疊狀態(tài)。

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

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

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

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

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

uncheckAll(options)：Uncheck所有的節(jié)點(diǎn)。

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

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

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

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

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

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

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

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

事件

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

在參數(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)：一個(gè)節(jié)點(diǎn)被checked。

nodeCollapsed (event, node)：一個(gè)節(jié)點(diǎn)被折疊。

nodeDisabled (event, node)：一個(gè)節(jié)點(diǎn)被禁用。

nodeEnabled (event, node)：一個(gè)節(jié)點(diǎn)被啟用。

nodeExpanded (event, node)：一個(gè)節(jié)點(diǎn)被展開(kāi)。

nodeSelected (event, node)：一個(gè)節(jié)點(diǎn)被選擇。

nodeUnchecked (event, node)：一個(gè)節(jié)點(diǎn)被unchecked。

nodeUnselected (event, node)：取消選擇一個(gè)節(jié)點(diǎn)。

searchComplete (event, results)：搜索完成之后觸發(fā)。

searchCleared (event, results)：搜索結(jié)果被清除之后觸發(fā)。


簡(jiǎn)單例子：

var tree = [

{

text: "Parent 1",

nodes: [

{

text: "Child 1",

nodes: [

{

text: "Grandchild 1"

},

{

text: "Grandchild 2",

icon: "glyphicon glyphicon-stop",

selectedIcon: "glyphicon glyphicon-stop",

color: "#000000",

backColor: "#FFFFFF",

href: "#node-1",

selectable: false,

state: {

checked: false,

disabled: false,

expanded: true,

selected: false

},

}

]

},

{

text: "Child 2",

color: "#000000",

backColor: "#FFFFFF",

href: "#node-1",

selectable: true,

state: {

checked: true,

disabled: true,

expanded: true,

selected: true

},

}

]

},

{

text: "Parent 2"

},

{

text: "Parent 3"

},

{

text: "Parent 4"

},

{

text: "Parent 5"

}];

/*

@currentNode 當(dāng)前節(jié)點(diǎn)

勾選當(dāng)前節(jié)點(diǎn)遞歸勾選下面子節(jié)點(diǎn)

*/

function toggleCheckChildren(currentNode) {

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

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

var childs = currentNode.nodes;

if (childs) {

for (var child in childs) {

toggleCheckChildren(childs[child]);

}

}

else {

return;

}

}

/*

@currentNode 當(dāng)前節(jié)點(diǎn)

取消勾選當(dāng)前節(jié)點(diǎn)遞歸取消下面子節(jié)點(diǎn)

*/

function toggleUncheckChildren(currentNode) {

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

var childs = currentNode.nodes;

if (childs) {

for (var child in childs) {

toggleUncheckChildren(childs[child]);

}

}

else {

return;

}

}

$(function () {

var options = {

bootstrap2: false,

showTags: false,

levels: 5,

showCheckbox: true,

data: tree,

onNodeChecked: function (event, node) {

debugger;

toggleCheckChildren(node);

},

onNodeUnchecked: function (event, node) {

debugger;

toggleUncheckChildren(node);

}

}

$('#treeview').treeview(options);

});

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,711評(píng)論 19贊 139
  • https://nodejs.org/api/documentation.html 工具模塊 Assert 測(cè)試 ...
    KeKeMars閱讀 6,620評(píng)論 0贊 6
  • 紅黑樹(shù)是平衡二叉查找樹(shù)的一種。為了深入理解紅黑樹(shù)，我們需要從二叉查找樹(shù)開(kāi)始講起。 BST 二叉查找樹(shù)（Binary...
    kanehe閱讀 1,465評(píng)論 0贊 8
  • 總是要擁抱新天地的 總是要努力向前的 總是要為了自己的將來(lái)奮斗的 謝謝曾經(jīng)受過(guò)的傷...
    月舞簽閱讀 142評(píng)論 0贊 0
  • 2015/08/19 有一種悲傷叫做“真的很無(wú)力”，那是在自己沒(méi)有能力的情況下不得不做出的妥協(xié)； 有一種委屈叫做“...
    蒙奇奇_阿蒙蠻好的閱讀 292評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容