蜂鸟树视图是一个jQuery插件，它将嵌套的html列表转换为一个可扩展、可折叠、可搜索、可检查的分层树结构，并具有许多有用的选项和API。

还包括对复选框输入中的“不确定”状态的支持。

参见：

• jQuery的10个最佳树状视图插件

如何使用它:

1.创建一个嵌套无序列表的HTML树，如下所示。这个数据字符串属性用于向节点添加更多自定义功能。

<!-- Use a pseudo HTML list -->
<div class="hummingbird-treeview-converter">
  <li id="item_1" data-id="node_1">Node 1</li>
  <li id="item_2" data-id="node_1_1">-Node 1-1</li>
  <li id="item_3" data-id="node_1_1_1">--Node 1-1-1</li>
  <li id="item_4" data-id="node_1_2">-Node 1-2</li>
  <li id="item_5" data-id="node_2" data-str='data-toggle="tooltip" data-placement="auto" title="Custom Title"'>Node 2</li>
  ...
</div>

<!-- Use a real HTML list -->
<div id="treeview_container" class="hummingbird-treeview">
  <ul id="treeview" class="hummingbird-base">
    <li data-id="0">
      <i class="fa fa-plus"></i>
      <label>
      <input id="xnode-1" data-id="custom-1" type="checkbox" /> node-1
      </label>
      <ul>
        <li data-id="1">
          <i class="fa fa-plus"></i>
          <label>
          <input  id="xnode-1-1" data-id="custom-1-1" type="checkbox" /> node-1-1
          </label>
          <ul>
            <li>
              <label>
              <input class="hummingbird-end-node" id="xnode-1-1-1" data-id="custom-1-1-1" type="checkbox" /> node-1-1-1
              </label>
            </li>
          </ul>
        </li>
        <li data-id="1">
          <i class="fa fa-plus"></i>
          <label>
          <input  id="xnode-1-2" data-id="custom-1-2" type="checkbox" /> node-1-2
          </label>
          <ul>
            <li>
              <label>
              <input class="hummingbird-end-node" id="xnode-1-2-1" data-id="custom-1-2-1" type="checkbox" /> node-1-2-1
              </label>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

2.下载jQuery蜂鸟树视图插件的文件并将其与jQuery库一起加载到文档中。

<link href="hummingbird-treeview.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="hummingbird-treeview.js"></script> 

3.为必要的图标加载字体真棒（4或5）。

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

4.只需初始化插件即可。

$("#treeview").hummingbird();

5.可用数据属性：

• 数据高度：树状视图的高度
• 数据滚动：确定树状视图是否可滚动
• 数据id:唯一ID
• 数据粗体家长：将所有父节点的文本设置为粗体
• 数据css：注入任意CSS，文本颜色和背景颜色除外
• 数据非悬停颜色
• 数据非悬停颜色_ bg
• 数据悬停颜色
• 数据悬停颜色_ bg

<div class="hummingbird-treeview-converter" 
     data-height="450px" 
     data-scroll="true" 
     data-id="_example" 
     data-boldParents="true">
     ...
</div>

6.覆盖全局设置。

// Font Awesome prefix
// "fas" or "far" for Font Awesome 5
$.fn.hummingbird.defaults.SymbolPrefix = "fa"

// Collapsed Symbol
$.fn.hummingbird.defaults.collapsedSymbol = "fa-plus";

// Expand Symbol
$.fn.hummingbird.defaults.expandedSymbol = "fa-minus";

// Collapse all nodes on init
$.fn.hummingbird.defaults.collapseAll = true; 

// Enable checkboxes
$.fn.hummingbird.defaults.checkboxes = "enabled"; 

// Set this to "disabled" to disable all checkboxes from nodes that are parents
$.fn.hummingbird.defaults.checkboxesGroups= "enabled"; 

// New option singleGroupOpen to allow only one group to be open and collapse all others.
// The number provided defines the level to which the function should be applied (starting at 0). 
$.fn.hummingbird.defaults.singleGroupOpen = -1;

// Enable a mouse hover effect on items
$.fn.hummingbird.defaults.hoverItems = false; 

// Set this to true to enable the functionality to account for n-tuples (doubles, triplets, ...). 
$.fn.hummingbird.defaults.checkDoubles = false;


// Or "bootstrap" to use Bootstrap's styles
$.fn.hummingbird.defaults.hoverMode = "html"; 

// Background color on hover
$.fn.hummingbird.defaults.hoverColorBg1 = "#6c757c"; 

// Background color on non hover
$.fn.hummingbird.defaults.hoverColorBg2 = "white"; 

// Text color on hover
$.fn.hummingbird.defaults.hoverColorText1 = "white"; 

// Text color on non hover
$.fn.hummingbird.defaults.hoverColorText2 = "black"; 

// Use Bootstrap colors
$.fn.hummingbird.defaults.hoverColorBootstrap = "bg-secondary text-white"; 

// Set this to "enabled" to add collapse and expand functionality to a click on a parent node name.
$.fn.hummingbird.defaults.clickGroupsToggle = "disabled"; 

7.API方法。

// check all nodes
$("#treeview").hummingbird("checkAll");

// uncheck all nodes
$("#treeview").hummingbird("uncheckAll");

// collapse all nodes
$("#treeview").hummingbird("collapseAll");

// expand all nodes
$("#treeview").hummingbird("expandAll");

// check a specific node
$("#treeview").hummingbird("checkNode",{
  sel:"id", // "id", "data-id" or "text"
  vals:["hum_1","hum_2","hum_3"],
});

// uncheck a specific node
$("#treeview").hummingbird("uncheckNode",{
  sel:"id", // "id", "data-id" or "text"
  vals:["hum_1","hum_2","hum_3"],
});

// expand a specific node
$("#treeview").hummingbird("expandNode",{
  sel:"id", // "id", "data-id" or "text"
  vals:["hum_1","hum_2","hum_3"],
  expandParents:false
});

// collapse a specific node
$("#treeview").hummingbird("collapseNode",{
  sel:"id", // "id", "data-id" or "text"
  vals:["hum_1","hum_2","hum_3"],
  collapseChildren:false
});

// Disables expand and collapse functionality of a node, which is identified by its id or data-id, which has to be defined in the attr parameter. The name parameter holds the name of the id or data-id.
$("#treeview").hummingbird("disableToggle",{
  sel:"id", // "id", "data-id" or "text"
  vals:["hum_1","hum_2","hum_3"],
});

// disable a specific node
$("#treeview").hummingbird("disableNode",{
  sel:"id", // "id", "data-id" or "text"
  vals:["hum_1","hum_2","hum_3"],
  state:true,
  disableChildren:true,
});

// enable a specific node
$("#treeview").hummingbird("enableNode",{
  sel:"id", // "id", "data-id" or "text"
  vals:["hum_1","hum_2","hum_3"],
  state:true,
  disableChildren:true,
});

// hide a node
$("#treeview").hummingbird("hideNode",{
  sel:"id", // "id", "data-id" or "text"
  vals:["hum_1","hum_2","hum_3"],
  state:true,
  disableChildren:true,
});

// show a node
$("#treeview").hummingbird("showNode",{
  sel:"id", // "id", "data-id" or "text"
  vals:["hum_1","hum_2","hum_3"],
  state:true,
  disableChildren:true,
});

// disable parent node on collapse
$("#treeview").hummingbird("showNode",{
  sel:"id",
  vals: ["hum_5","hum_6"],
  state:true
});

// add nodes
$("#treeview").hummingbird('addNode',{
  pos:['after','after'],
  anchor_sel:['text','id'],
  anchor_vals:['node-0-1-1-2','hum_5'],
  text:['New Node1','New Node2'],
  the_id:['new_id1','new_id2'],
  data_id:['new_data_id1','new_data_id2']
});

// remove a node
$("#treeview").hummingbird('removeNode',{
  sel:"id", // "id", "data-id" or "text"
  vals:"node-0-1-1-2",
  state:true,
  disableChildren:true,
});

// get checked nodes
var List = {"id" : [], "dataid" : [], "text" : []};
$("#treeview").hummingbird(getChecked",{
  list:List,
  onlyEndNodes:true,
  onlyParents:false,
  fromThis:false
});

// get unchecked nodes
var List = {"id" : [], "dataid" : [], "text" : []};
$("#treeview").hummingbird(getUnchecked",{
  list:List,
  onlyEndNodes:true,
  onlyParents:false
});

// get indeterminate nodes
var List = {"id" : [], "dataid" : [], "text" : []};
$("#treeview").hummingbird("getIndeterminate",{
  list:List
});

// save the state of the treeview for later rebuilding
var treeState = {};
$("#treeview").hummingbird("saveState",{
  save_state:treeState
});

// restore the saved state
$("#treeview").hummingbird("restoreState",{
  restore_state:treeState
});

// a function that controls the tri-state functionality
$("#treeview").hummingbird("triState");

// Skip firing the CheckUncheckDone event in the following call. 
// This method can be called before any other method to skip firing the CheckUncheckDone event in the followed method.
$("#treeview").hummingbird("skipCheckUncheckDone");

// remove all nodes which NOT match a search patter
$("#treeview").hummingbird("filter",{
  str:".txt|.jpg|test", 
  caseSensitive: false, 
  box_disable:false, 
  onlyEndNodes:false, 
  filterChildren:true
});

// If the treeview is embedded in a scrollable (css option: overflow-y: scroll;) container, this container must be identified here as the treeview_container (using the id). Otherwise treeview_container should be set to "body". 
// The search_input parameter depicts the id of the input element for the search function. 
// The search_output defines an element to bind the search results on (like the ul in the example below). 
// The search_button is simply the button for the search. 
// A scrollOffset in pixels (negative or positive) can be defined to adjust the automatic scoll position. 
// The best value must be observed by testing. onlyEndNodes is per default false, thus set this to true if the search should include also parent nodes. 
// The optional parameter dialog is per default empty (""). This parameter can be used for special cases, to bind the treeview to a dynamical created object like a bootstrap modal (pop-up). 
// In such a case this parameter would be dialog:".modal-dialog". 
// Three other optional parameters, EnterKey, enter_key_1 and enter_key_2 are available. 
// EnterKey is per default true and can be set to false. If true the search_button can be triggered with the Enter key. 
// To avoid interference of the Enter key functionality it can be restricted and only be executable if enter_key_1 == enter_key_2. 
// These two parameters can be chosen arbitrarily.
$("#treeview").hummingbird("search",{
  treeview_container:"treeview_container", 
  search_input:"search_input", 
  search_output:"search_output", 
  search_button:"search_button", 
  scrollOffset:-515, 
  onlyEndNodes:false
});

8.活动可用。

$("#treeview").on("nodeChecked", function(){
  // when checked
});

$("#treeview").on("nodeUnchecked", function(){
  // when unchecked
});

$("#treeview").on("CheckUncheckDone", function(){
  // when checked or unchecked
});

更新日志：

3.0.5版（2022-08-17）

• 新的data-*属性用于设置单个节点的文本颜色和背景颜色：data-nonHoverColor、data-nonHoverColor_bg、data-HoverColor、data-HaverColor_bg。

版本3.0.3（2022-03-25）

• 新方法disableParentNodeOnCollapse

版本3.0.3（2022-03-12）

• “2。简单的伪HTML加“输入格式现在有了一个额外的参数数据css来注入任意的css。

3.0.1版（2022-02-25）

• 允许在vals中使用特殊字符

3.0.0版（2021-06-02）

• 大规模任务的大升级。如果仅以交互方式使用树视图，则不需要进行任何更改。然而，如果你已经用不同的方法编程使用了它，你必须改变你的语法和概念！

v2.1.6 (2021-02-08)

• 添加了新方法skipCheckUncheckDone
• 禁用/启用时的错误修复

v2.1.5 (2021-02-01)

• 添加了隐藏/显示的新方法。
• 添加了新功能数据存储。

v2.1.4版本（2020-11-19）

• 错误修复禁用的节点

v2.1.1版本（2020-10-23）

• 修复了悬停时更改颜色的禁用节点的错误

2020-07-09

• JS更新

2020-07-08

• 错误修复

2020-06-30

• 补充数据idtodiv class=“蜂鸟树视图转换器”设置单个id以寻址树视图，例如通过$("#treeview_movies").hummingbird();.

2020-03-18

• 更新启用、禁用、li到标签和颜色

2020-03-04

• 新方法：disableToggle
• 新选项：单击组切换

2020-01-31

• 新选项：可自定义悬停效果。

2019-12-24

• JS更新

2019-12-04

• 添加了singleGroupOpen选项

2019-11-26

• 添加字体真棒5支持

2019-08-31

• 实现不区分大小写的过滤器搜索作为默认值，并具有覆盖功能

2019-04-30

• 添加字体真棒5支持

2018-11-19

• 添加包含父节点的父节点

2018-11-14

• 在CSS中将nowrap添加到蜂鸟基类

2018-10-18

• 添加新的筛选器功能

2018-10-17

• 向筛选器添加禁用功能

2018-10-11

• 新建getChecked

2018-10-10

• 添加筛选器功能

2018-07-25

• 在一个页面上支持多个树视图

2017-11-18

• 由于新功能，可以在启用子节点的同时禁用父节点，因此修复了一些问题。在这种情况下，被禁用的父级提供完整的三态功能。可以动态启用/禁用子节点。重要的是，不允许启用的父节点禁用所有子节点。

2017-11-16

• 现在总是为残疾人提供完整的三态功能，不能再禁用了

2017-11-16

• 添加新选项复选框Groups并更新disableNode和enableNode

2017-09-01

• 新的getChecked atrr:text
• 使用新类名蜂鸟端节点

2017-08-30

• 已修复uncheckAll方法上的错误

 

预览截图

带复选框 可折叠树视图 jQuery蜂鸟树视图