bootstrap-treeview中文API 以及后台JSON數據處理

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

bootstrap列表樹示意圖

插件依賴

Bootstrap v3.0.3
jQuery v2.0.3

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

使用方法

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

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

HTML結構

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

調用插件

該列表樹插件最基本的調用方法如下：

 
                   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" 
                   , 
                  
                   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 
                    
                     }]); 
                    
                     $('##tree').treeview('search', [ value,{ ignoreCase: false, exactMatch: false },attr]); 
                    
                     value:值， 
                    
                     attr:需要查詢的屬性

觸發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)：搜索結果被清除之后觸發。