Bootstrap-treeView 实际操作总结

Posted 2021-01-20 zhao-y

由于功能性需求：需要展示一个树状结构的导航界面

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 实际操作总结的主要内容，如果未能解决你的问题，请参考以下文章

bootstrap-treeview

bootstrap-treeview中文API 以及后台JSON数据处理

bootstrap-treeview 点击复选框事件怎么做？

基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单

bootstrap-treeview 如何实现只能展开一个node，当展开一个节点时，其他节点全部收起。

组件分享之前端组件——bootstrap-treeview 简单的tree树组件