Bootstrap-treeView 實際操作總結
由於功能性需求：需要展示一個樹狀結構的導航界面
1.進行資源引用
<!-- Required Stylesheets --> <link href="bootstrap.css" rel="stylesheet"> <!-- Required Javascript --> <script src="jquery.js"></script> <script src="bootstrap-treeview.js"></script>
2.需要一個DOM元素綁定該組件：
<div id="tree"></div>
基本用法是這樣：
$(‘#tree‘).treeview({
data: getTree(), // 獲取數據節點
levels: 5,//節點層級數
color: "#000",//每一級通用的 節點字體顏色
backColor: "#fff",//每一級通用的 節點字背景色
onhoverColor: "orange",//選中浮動顏色
borderColor: "red",//設置組件的邊框顏色; 設置showBorder為false，如果你不想要一個可見的邊框
showBorder: false,
showTags: true,//是否在每個節點的右側顯示標簽。 其值必須在每個節點的數據結構中提供
highlightSelected: true,//是否突出顯示選定的節點
selectedColor: "#fff",//設置選定節點的前景色
selectedBackColor: "darkorange",//設置選定節點的背景色
});
以這種方式進行數據綁定以及初始界面色彩效果的設置，默認點擊效果第一次選中，第二次點擊會選中效果會消失。通過設置onhoverColor屬性，可以將節點一直處於選中效果。
------------------------樹狀數據結構------------------------------------
function getTree() {
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"
}
];
return tree;
}
3.通過學習查找資料，可以給每個節點添加li點擊事件，實現每個節點的點擊操作
<li class="list-group-item" onclick="itemOnclick(this)"></li>
function itemOnclick(target) {
if (target.childNodes.length > 3) {
var val = target.childNodes[3].data;
$("#UserId").find("option[value=‘" + val + "‘]").attr("selected", "selected");
$("#UserId_flexselect")["0"].value = val;
}
//找到當前節點id
var nodeid = $(target).attr(‘data-nodeid‘);
var tree = $(‘#tree‘);
//獲取當前節點對象
var node = tree.treeview(‘getNode‘, nodeid);
if (lastnode != null && target.children.length <= 2 ) {
var nodeidlast = $(lastnode).attr(‘data-nodeid‘);
var tree = $(‘#tree‘);
//獲取當前節點對象
var nodelast = tree.treeview(‘getNode‘, nodeidlast);
tree.treeview(‘collapseNode‘, nodelast.nodeId);
}
最終結果：花了不少時間迷糊：
最後效果：
擴展：還剩下好多屬性，沒有時間研究：後續再慢慢看吧
$(‘#tree‘).treeview({
data: getTree(), // 獲取數據節點
levels: 5,//節點層級數
color: "#000",//每一級通用的 節點字體顏色
backColor: "#fff",//每一級通用的 節點字背景色
onhoverColor: "orange",//選中浮動顏色
borderColor: "red",//設置組件的邊框顏色; 設置showBorder為false，如果你不想要一個可見的邊框
showBorder: false,
showTags: true,//是否在每個節點的右側顯示標簽。 其值必須在每個節點的數據結構中提供
highlightSelected: true,//是否突出顯示選定的節點
selectedColor: "#fff",//設置選定節點的前景色
selectedBackColor: "darkorange",//設置選定節點的背景色
});
節點屬性
定義以下屬性以允許節點級別覆蓋，如節點特定的圖標，顏色和標記
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) - 搜索結果被清除後
Bootstrap-treeView 實際操作總結