Twitter Bootstrap的樹檢視 - Bootstrap Tree View http://jonmiles.github.io/bootstrap-treeview/

Bootstrap樹檢視

---

  

一個簡單而優雅的解決方案，可以顯示分層樹結構（即樹檢視），同時利用Twitter Bootstrap提供的最佳功能。

依賴

如果提供這些是實際版本bootstrap-treeview已經過測試。

• Bootstrap v3.3.4（> = 3.0.0）
• jQuery v2.1.3（> = 1.9.0）

入門

安裝

您可以使用涼亭安裝（推薦）：

$ bower安裝bootstrap - treeview

或使用npm：

$ npm install bootstrap - treeview

或手動下載。

用法

新增以下資源以使bootstrap-treeview正常執行。

<！ -必需的樣式表- > 
< link  href = “ bootstrap.css ”  rel = “ stylesheet ” >

<！ -必需的Javascript - > 
< script  src = “ jquery.js ” > </ script
 
 >
< script  src = “ bootstrap-treeview.js ” > </ script >

該元件將繫結到任何現有的DOM元素。

< div  id = “ tree ” > </ div >

基本用法可能看起來像這樣。

function  getTree（）{
   //一些用於檢索或生成樹結構
  返回資料的邏輯 ;
}

$（'＃tree '）。treeview（{data ： getTree（）}）;

資料結構

為了定義樹所需的層次結構，有必要提供巢狀的JavaScript物件陣列。

例

var tree = [
  {
    文字： “父1 ”，
    節點： [
      {
        文字： “孩子1 ”，
        節點： [
          {
            文字： “孫子1 ”
          }，
          {
            文字： “孫子2 ”
          }
        ]
      }，
      {
        文字： “孩子2 ”
      }
    ]
  }，
  {
    文字： “父母2 ”
  }，
  {
    文字： “父母3 ”
  }，
  {
    文字： “父母4 ”
  }，
  {
    文字： “父母5 ”
  }
]。

在最低級別，樹節點表示為簡單的JavaScript物件。這個必需屬性text將為您構建一棵樹。

{
  文字： “節點1 ” 
}

如果您想要做更多，這是完整的節點規範

{
  文字： “節點1 ”，
  圖示： “ glyphicon glyphicon-stop ”，
  selectedIcon ： “ glyphicon glyphicon-stop ”，
  顏色： “＃000000 ”，
  backColor ： “ #FFFFFF ”，
  href ： “＃node-1 ”，
  可選： 真的，
  州： {
    檢查： 是的，
    禁用： 是的，
    擴充套件： 是的，
    選中： 是的
  }，
  標籤： [ ' available ' ]，
  節點： [
    {}，
    ...
  ]
}

節點屬性

定義以下屬性以允許節點級別覆蓋，例如節點特定圖示，顏色和標記。

文字

String Mandatory

顯示給定樹節點的文字值，通常位於節點圖示的右側。

圖示

String Optional

顯示在給定節點上的圖示，通常位於文字的左側。

為簡單起見，我們直接利用Bootstraps Glyphicons支援，因此您應該提供由空格分隔的基類和單個圖示類。

通過提供基類，您可以完全控制所使用的圖示。如果您想使用自己的，只需將您的類新增到此圖示欄位。

selectedIcon

String Optional

選中時在給定節點上顯示的圖示，通常位於文字的左側。

顏色

String Optional

給定節點上使用的前景色會覆蓋全域性顏色選項。

背景色

String Optional

給定節點上使用的背景顏色將覆蓋全域性顏色選項。

HREF

String Optional

與全域性enableLinks選項結合使用，以指定給定節點上的錨標記URL。

可選

Boolean Default: true

是否可以在樹中選擇節點。False表示節點應作為擴充套件標題，不會觸發選擇事件。

州

Object Optional 描述節點的初始狀態。

state.checked

Boolean Default: false

是否檢查節點，由複選框樣式glyphicon表示。

state.disabled

Boolean Default: false

是否禁用節點（不可選擇，可擴充套件或可檢查）。

state.expanded

Boolean Default: false

是否擴充套件節點即開啟。優先於全域性選項級別。

state.selected

Boolean Default: false

是否選擇了節點。

標籤

Array of Strings Optional

與全域性showTags選項一起使用，以在每個節點的右側新增其他資訊; 使用Bootstrap徽章

可擴充套件

您可以通過新增應用程式所需的任意數量的其他鍵值對來擴充套件節點物件。請記住，這是在選擇事件期間傳遞的物件。

選項

選項允許您自定義樹檢視的預設外觀和行為。它們在初始化時作為物件傳遞給外掛。

//示例：初始化樹檢視
//擴充套件到5個級別
//背景顏色為綠色
$（ ' #tree '）。treeview（{
  資料：資料，          //資料不是可選 
  級別： 5，
  backColor ： ' green ' 
}）;

您可以隨時將新選項物件傳遞給樹檢視，但這會重新初始化樹檢視。

選項列表

以下是所有可用選項的列表。

資料

物件陣列。沒有預設值，期望資料

這是樹檢視要顯示的核心資料。

背景色

字串，任何合法的顏色值。預設值：從Bootstrap.css繼承。

設定所有節點使用的預設背景顏色，除非在資料中基於每個節點覆蓋。

邊框顏色

字串，任何合法的顏色值。預設值：從Bootstrap.css繼承。

設定元件的邊框顏色; 如果您不想要可見邊框，請將showBorder設定為false。

checkedIcon

字串，類名。預設值：Bootstrap Glyphicons定義的“glyphicon glyphicon-check”

將圖示設定為選中複選框，與showCheckbox結合使用。

collapseIcon

字串，類名。預設值：Bootstrap Glyphicons定義的“glyphicon glyphicon-minus”

設定要在可摺疊樹節點上使用的圖示。

顏色

字串，任何合法的顏色值。預設值：從Bootstrap.css繼承。

設定所有節點使用的預設前景色，除非在資料中基於每個節點覆蓋。

emptyIcon

字串，類名。預設值：Bootstrap Glyphicons定義的“glyphicon”

設定要在沒有子節點的樹節點上使用的圖示。

enableLinks

布林。預設值：false

是否將節點文字顯示為超連結。必須在每個節點的資料結構中提供其href值。

expandIcon

字串，類名。預設值：Bootstrap Glyphicons定義的“glyphicon glyphicon-plus”

設定要在可擴充套件樹節點上使用的圖示。

highlightSearchResults

布林。預設值：true

是否突出顯示搜尋結果。

highlightSelected

布林。預設值：true

是否突出顯示所選節點。

水平

整數。預設值：2

設定預設情況下樹將擴充套件到的層次級別數。

多選

布林。預設值：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.外掛的包裝器

外掛的包裝器用作訪問底層方法的代理。

$（'＃tree '）。treeview（' methodName '，args）

限制，多個引數必須作為引數陣列傳遞。

2.樹檢視直接

您可以使用以下兩種方法之一獲取樹檢視的例項。

//此特殊方法返回樹檢視的例項。
$（ '＃tree '）。treeview（ true）
  。methodName（args）;

//例項也儲存在DOM元素資料中，
//可以使用外掛的id“treeview”訪問。
$（ '＃tree '）。資料（ ' treeview '）
  。methodName（args）;

如果您計劃大量互動，那麼這是一種更好的方法。

方法清單

以下是所有可用方法的列表。

checkAll（選項）

檢查所有樹節點

$（'＃tree '）。treeview（' checkAll '，{silent ： true }）;

觸發nodeChecked事件; 通過沉默來壓制事件。

checkNode（node | nodeId，options）

檢查給定的樹節點，接受node或nodeId。

$（'＃tree '）。treeview（' checkNode '，[nodeId，{silent ： true }]）;

觸發nodeChecked事件; 通過沉默來壓制事件。

clearSearch（）

清除任何先前搜尋結果的樹檢視，例如刪除其突出顯示的狀態。

$（'＃tree '）。treeview（' clearSearch '）;

觸發searchCleared事件

collapseAll（選項）

摺疊所有樹節點，摺疊整個樹。

$（'＃tree '）。treeview（' collapseAll '，{silent ： true }）;

觸發nodeCollapsed事件; 通過沉默來壓制事件。

collapseNode（node | nodeId，options）

摺疊給定的樹節點及其子節點。如果您不想摺疊子節點，請傳遞選項{ ignoreChildren: true }。

$（'＃tree '）。treeview（' collapseNode '，[nodeId，{silent ： true，ignoreChildren ： false }]）;

觸發nodeCollapsed事件; 通過沉默來壓制事件。

disableAll（選項）

禁用所有樹節點

$（'＃tree '）。treeview（' disableAll '，{silent ： true }）;

觸發nodeDisabled事件; 通過沉默來壓制事件。

disableNode（node | nodeId，options）

禁用給定的樹節點，接受節點或nodeId。

$（'＃tree '）。treeview（' disableNode '，[nodeId，{silent ： true }]）;

觸發nodeDisabled事件; 通過沉默來壓制事件。

enableAll（選項）

啟用所有樹節點

$（'＃tree '）。treeview（' enableAll '，{silent ： true }）;

觸發nodeEnabled事件; 通過沉默來壓制事件。

enableNode（node | nodeId，options）

啟用給定樹節點，接受節點或nodeId。

$（'＃tree '）。treeview（' enableNode '，[nodeId，{silent ： true }]）;

觸發nodeEnabled事件; 通過沉默來壓制事件。

expandAll（選項）

展開所有樹節點。可選地，可以擴充套件到任何給定數量的級別。

$（'＃tree '）。treeview（' expandAll '，{levels ： 2，silent ： true }）;

觸發nodeExpanded事件; 通過沉默來壓制事件。

expandNode（node | nodeId，options）

展開給定的樹節點，接受node或nodeId。可選地，可以擴充套件到任何給定數量的級別。

$（'＃tree '）。treeview（' expandNode '，[nodeId，{levels ： 2，silent ： true }]）;

觸發nodeExpanded事件; 通過沉默來壓制事件。

getCollapsed（）

返回摺疊節點的陣列，例如state.expanded = false。

$（'＃tree '）。樹檢視（' getCollapsed '，節點ID）;

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（節點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 '，節點）;

getUnselected（）

返回未選定節點的陣列，例如state.selected = false。

$（'＃tree '）。treeview（' getUnselected '，nodeId）;

去掉（）

刪除樹檢視元件。刪除附加事件，內部附加物件和新增的HTML元素。

$（'＃tree '）。treeview（'刪除'）;

revealNode（node | nodeId，options）

顯示給定的樹節點，將樹從節點擴充套件到根。

$（'＃tree '）。treeview（' revealNode '，[nodeId，{silent ： true }]）;

觸發nodeExpanded事件; 通過沉默來壓制事件。

搜尋（模式，選項）

在樹檢視中搜索與給定字串匹配的節點，並在樹中突出顯示它們。

返回匹配節點的陣列。

$（'＃tree '）。treeview（' search '，[ ' Parent '，{
  ignoreCase ： true，      //不區分大小寫的 
  exactMatch ： false，     // like或equals 
  revealResults ： true，   //顯示匹配的節點 
}]）;

觸發searchComplete事件

selectNode（node | nodeId，options）

選擇給定的樹節點，接受節點或nodeId。

$（'＃tree '）。treeview（' selectNode '，[nodeId，{silent ： true }]）;

觸發nodeSelected事件; 通過沉默來壓制事件。

toggleNodeChecked（node | nodeId，options）

切換節點檢查狀態; 檢查是否未選中，如果選中則取消選中。

$（'＃tree '）。treeview（' toggleNodeChecked '，[nodeId，{silent ： true }]）;

觸發任一nodeChecked或nodeUnchecked事件; 通過沉默來壓制事件。

toggleNodeDisabled（node | nodeId，options）

切換節點禁用狀態; 如果啟用則禁用，如果禁用則啟用。

$（'＃tree '）。treeview（' toggleNodeDisabled '，[nodeId，{silent ： true }]）;

觸發任一nodeDisabled或nodeEnabled事件; 通過沉默來壓制事件。

toggleNodeExpanded（node | nodeId，options）

切換節點擴充套件狀態; 如果展開則摺疊，摺疊時展開。

$（'＃tree '）。treeview（' toggleNodeExpanded '，[nodeId，{silent ： true }]）;

觸發任一nodeExpanded或nodeCollapsed事件; 通過沉默來壓制事件。

toggleNodeSelected（node | nodeId，options）

切換節點選擇狀態; 選擇是否未選中，如果選擇則取消選擇。

$（'＃tree '）。treeview（' toggleNodeSelected '，[nodeId，{silent ： true }]）;

觸發任一nodeSelected或nodeUnselected事件; 通過沉默來壓制事件。

uncheckAll（選項）

取消選中所有樹節點。

$（'＃tree '）。treeview（' uncheckAll '，{silent ： true }）;

觸發nodeUnchecked事件; 通過沉默來壓制事件。

uncheckNode（node | nodeId，options）

取消選中給定的樹節點，接受node或nodeId。

$（'＃tree '）。treeview（' uncheckNode '，[nodeId，{silent ： true }]）;

觸發nodeUnchecked事件; 通過沉默來壓制事件。

unselectNode（node | nodeId，options）

取消選擇給定的樹節點，接受節點或nodeId。

$（'＃tree '）。treeview（' unselectNode '，[nodeId，{silent ： true }]）;

觸發nodeUnselected事件; 通過沉默來壓制事件。

活動

提供事件以便您的應用程式可以響應樹檢視狀態的更改。例如，如果要在選擇節點時更新顯示，請使用該nodeSelected事件。

您可以使用選項回撥處理程式或標準jQuery .on方法繫結到下面定義的任何事件。

使用選項回撥處理程式的示例：

$（'＃tree '）。treeview（{
   //回撥的命名約定是以`on` 
  //
  為字首並大寫事件名稱的第一個字母//例如nodeSelected  - > onNodeSelected 
  onNodeSelected ： function（event，data）{
     //你的邏輯在這裡 
  }）;

並使用jQuery .on方法

$（'＃tree '）。on（' nodeSelected '，function（event，data）{
   //你的邏輯在這裡 
}）;

活動清單

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) - 清除搜尋結果後

版權和許可

版權所有2013 Jonathan Miles

根據Apache許可證2.0版（“許可證”）獲得許可; 除非符合許可，否則您不得使用此檔案。您可以在http://www.apache.org/licenses/LICENSE-2.0上獲取許可證的副本

除非適用法律要求或書面同意，否則根據許可證分發的軟體按“原樣”分發，不附帶任何明示或暗示的擔保或條件。有關管理許可下的許可權和限制的特定語言，請參閱許可證。

https://github.com/jonmiles/bootstrap-treeview