bootstrap-treeview树形图参数详解

最新推荐文章于 2024-05-24 09:53:31 发布
最新推荐文章于 2024-05-24 09:53:31 发布
阅读量1.2k 收藏
点赞数
分类专栏： javascript
原文链接：http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html
版权

简要教程

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。

 

 插件依赖

  • Bootstrap v3.0.3
  • jQuery v2.0.3

以上两个外部依赖文件已经经过测试可以正常使用，其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。

 使用方法

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

<!-- Required Stylesheets -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap-treeview.js"></script>
           

 HTML结构

可以使用任何HTML DOM元素来作为该列表树的容器：

<div id="tree1">
               

 调用插件

该列表树插件最基本的调用方法如下：

$('#tree1').treeview({
    data:defaultData
})
              

 数据结构

为了创建树的继承结构，需要为该列表树插件提供一个嵌套结构的js对象。例如：

var defaultData = [
     {
         text: 'Parent 1',
         href: '#parent1',
         tags: ['4'],
         nodes: [
             {
                 text: 'Child 1',
                 href: '#child1',
                 tags: ['2'],
                 nodes: [
                     {
                         text: 'Grandchild 1',
                         href: '#grandchild1',
                         tags: ['0']
                     },
                     {
                         text: 'Grandchild 2',
                         href: '#grandchild2',
                         tags: ['0']
                     }
                 ]
             },
             {
                 text: 'Child 2',
                 href: '#child2',
                 tags: ['0']
             }
         ]
     },
     {
         text: 'Parent 2',
         href: '#parent2',
         tags: ['0']
     },
     {
         text: 'Parent 3',
         href: '#parent3',
         tags: ['0']
     },
     {
         text: 'Parent 4',
         href: '#parent4',
         tags: ['0']
     },
     {
         text: 'Parent 5',
         href: '#parent5'  ,
         tags: ['0']
     }
 ];

最简单的树结构可以只有一个节点，使用一个带text属性的js对象来实现即可：

{

    text:"Node 1"

}                 

如果你需要自定义更多的内容，可以参考下面：

{

  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: [

    {},

    ...

  ]

}                

 节点属性

下面的参数可用于树节点的属性定义，如节点的文本、颜色和标签等。

参数名称参数类型参数描述
textString(必选项)列表树节点上的文本，通常是节点右边的小图标。
iconString(可选项)列表树节点上的图标，通常是节点左边的图标。
selectedIconString(可选项)当某个节点被选择后显示的图标，通常是节点左边的图标。
hrefString(可选项)结合全局enableLinks选项为列表树节点指定URL。
selectableBoolean. Default: true指定列表树的节点是否可选择。设置为false将使节点展开，并且不能被选择。
stateObject(可选项)一个节点的初始状态。
state.checkedBoolean，默认值false指示一个节点是否处于checked状态，用一个checkbox图标表示。
state.disabledBoolean，默认值false指示一个节点是否处于disabled状态。（不是selectable，expandable或checkable）
state.expandedBoolean，默认值false指示一个节点是否处于展开状态。
state.selectedBoolean，默认值false指示一个节点是否可以被选择。
colorString. Optional节点的前景色，覆盖全局的前景色选项。
backColorString. Optional节点的背景色，覆盖全局的背景色选项。
tagsArray of Strings. Optional通过结合全局showTags选项来在列表树节点的右边添加额外的信息。

 全局参数

参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入：

$('#tree1').treeview({
    color: "#428bca",
    //backColor: "black",背景色
    //borderColor:'green',
    collapseIcon: "glyphicon glyphicon-minus",//可收缩的节点图标
    nodeIcon: "glyphicon glyphicon-user",
    //emptyIcon: "glyphicon glyphicon-ban-circle",//设置列表树中没有子节点的节点的图标
    expandIcon: "glyphicon glyphicon-plus",  //设置列表上中有子节点的图标
    highlightSearchResults:true,//是否高亮搜索结果 默认true
    highlightSelected:true,     //是否选中高亮显示
    onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
    levels: 0 ,                 //设置初始化展开几级菜单 默认为2
    selectedIcon: 'glyphicon glyphicon-tint',
   // selectedBackColor: 'black',  //设置被选中的节点背景颜色
    //selectedColor : 'red',      //设置被选择节点的字体、图标颜色
    showBorder:true,                //是否显示边框
    showCheckbox:false,              //是否显示多选框
    //uncheckedIcon:'',             //设置未选择节点的图标
    data:defaultData,
    showTags:true,//显示徽章
})

               

参数名称参数类型默认值描述
dataArray of Objects无列表树上显示的数据。
backColorString所有合法的颜色值，Default: inherits from Bootstrap.css。设置所有列表树节点的背景颜色。
borderColorString所有合法的颜色值，Default: inherits from Bootstrap.css。设置列表树容器的边框颜色，如果不想要边框可以设置showBorder属性为false。
checkedIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-check"设置处于checked状态的复选框图标。
collapseIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-minus"设置列表树可收缩节点的图标。
colorString所有合法的颜色值，Default: inherits from Bootstrap.css。设置列表树所有节点的前景色。
emptyIconString：class名称Bootstrap Glyphicons定义的"glyphicon"。设置列表树中没有子节点的节点的图标。
enableLinksBooleanfalse是否使用当前节点的文本作为超链接。超链接的href值必须在每个节点的data结构中给出。
expandIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-plus"设置列表树可展开节点的图标。
highlightSearchResultsBooleantrue是否高亮搜索结果。
highlightSelectedBooleantrue当选择节点时是否高亮显示。
onhoverColorString所有合法的颜色值， Default: '#F5F5F5'。设置列表树的节点在用户鼠标滑过时的背景颜色。
levelsIntegerDefault: 2设置继承树默认展开的级别。
multiSelectBooleanfalse是否可以同时选择多个节点。
nodeIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"设置所有列表树节点上的默认图标。
selectedIconString：class名称Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop"设置所有被选择的节点上的默认图标。
searchResultBackColorString所有合法的颜色值， Default: undefined, inherits。设置搜索结果节点的背景颜色。
searchResultColorString所有合法的颜色值， Default: '#D9534F'设置搜索结果节点的前景颜色。
selectedBackColorString所有合法的颜色值， Default: '#428bca'设置被选择节点的背景颜色。
selectedColorString所有合法的颜色值， Default: '#FFFFFF'。设置列表树选择节点的背景颜色。
showBorderBooleantrue是否在节点上显示边框。
showCheckboxBooleanfalse是否在节点上显示checkboxes。
showIconBooleantrue是否显示节点图标。
showTagsBooleanfalse是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。
uncheckedIconString：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

    }]);

    触发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)：搜索结果被清除之后触发。

js的函数代码

function getTreeJSON(){
        
    
     $.ajax({
         type: "GET",
         url: "/getSysOrganizeIdJSON.do",
         data: null,
         dataType: "text",
         success: function(data){
             var dt = [{
                 text: '标题',
                 nodes: eval('['+data+']')
             }]
                 
             $('#tree').treeview({
                    data: dt,       
                    expand: false,
                    onNodeSelected: function(event, data) {
                        alert(data['id']);//获取选中node的id
                      }

                });
         
         },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
             alert(XMLHttpRequest.status);
             alert(XMLHttpRequest.readyState);
             alert(textStatus);
               }
     });
    }
    getTreeJSON();

html部分代码

<div id="tree"></div>

 

五、补充

参考文档 http://www.bootcdn.cn/bootstrap-treeview/readme/

zhuzg2005
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap-treeview史上最强例子
07-08
强烈建议初次使用bootstrap的人参考，例子很全 bootstrap树控件使用bootstrap-treeview.js实现树前边多选框checkbox 并实现， 0、获取选中的项 1、点击父级的多选框，自己默认选中 2、全选 3、反选 4、展开、 5、折叠
bootstrap-treeview树节点实现动态加载（懒加载）
12-22
Bootstrap Treeview是一款基于Bootstrap框架的交互式树形视图组件，它使得在Web应用中展示层级数据变得简单直观。在官方版本中，虽然提供了丰富的功能，但并未直接支持动态加载或懒加载。动态加载（也称为懒加载）是...
Bootstrap树形菜单插件TreeView.js使用方法详解
记事本
12-14 3万+
Bootstrap树形菜单插件TreeView.js使用方法详解
bootstrap-treeview 增删改查
lmy_loveF的博客
06-29 1204
修改bootstrap-treeview.js 1.根据自定义id获取当前节点（getNodeV2 ） 2.添加节点（addNode） 3.编辑节点（updateNode） 4.删除节点（deleteNode） （添加节点后，父节点下需要追加刚刚添加的节点） 1.根据id获取当前节点 2.添加完成后，后台返回查询到的添加的节点信息，追加到节点后...............
引领前端布局新潮：Bootstrap 4 Tree View
最新发布
gitblog_00087的博客
05-24 442
引领前端布局新潮：Bootstrap 4 Tree View 项目地址:https://gitcode.com/chniter/bstreeview Bootstrap 4 Tree View 是一款专为Bootstrap 4设计的简单优雅的树形视图插件。它将数据结构转化为层次分明、易于操作的可视化元素，让您的网站和应用呈现出更清晰的信息结构。 项目介绍 Bootstrap 4 Tree View...
bootstrap风格的树形插件bootstrap treeview的使用记录
热门推荐
security_2015的博客
03-12 5万+
bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件，该jQuery插件基于Twitter Bootstrap。写这篇文章的目的在于记录下使用方法，以期后用。 一、插件官网：https://jquery-plugins.net/bootstrap-tree-view 二、demo示例：http://jonmiles.github.io/boo...
bootstrap-treeview 中文开发
皇位无忧的工作室
10-09 446
登录 Z.X bootstrap-treeview 中文开发手册 官方文档URL： https://www.npmjs.com/package/bootstrap-treeview 2017年11月21日10:45:10 演示：http://www.htmleaf.com/Demo/201502141380.html 下载：http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html github： https://github.com/j
使用插件bootstrap-treeview构建树形结构，使用JAVA递归构建树形结构的数据
玩火的稻草人的博客
03-25 1918
最近把项目中的树形插件换成了bootstrap-treeview，把使用过程中的事情和大家分享一下。 1、下载bootstrap-treeview插件，把css和js引入到项目中 <!-- bootstrap-treeview --> <link rel="stylesheet" href="${path}/js/bootstrap-treeview/css/bootstra......
Bootstrap treeview 简单用法
ztianming的博客
02-05 733
1，需要展示个树形下拉框多选 <html> <head></head> <body> <input type="text" id="knowledgeText" name="knowledgeText" class="form-control history_content" value="" onclick="$('#hideDiv').show()" placeholder="请选择"/> <div id="hideDi
bootstraptable-treeview树形，树形空格缩进bug已解决
09-14
在本文中，我们将深入探讨 "bootstraptable-treeview"，这是一个用于在 BootstrapTable 中实现树形结构的扩展。当我们处理树形数据时，正确地显示层次和缩进是非常重要的，因为它直接影响到用户对数据结构的理解和...
jquery-treeview
12-06
jquery-treeview
bstreeview：Bootstrap Treeview，这是一个非常简单的插件，用于使用Bootstrap 4构建基本而优雅的Treeview。请参见演示：
02-05
Bootstrap 4树视图 一个非常简单的插件，可以使用boostrap 4构建基本而优雅的Treeview。 依存关系 如果提供了这些，则将测试Bootstrap-treeview的实际版本。 入门 安装 您可以使用npm进行安装（推荐）： $ npm install bstreeview 或手动。 用法 添加以下资源以使bootstrap-treeview正常运行。 <!-- Required Stylesheets --> < link href =" bootstrap.css " rel =" stylesheet " > <!-- Required Javascrip
bootstrap-treeview动态加载后台数据菜单
12-27
动态加载json数据，增加点击展开功能，动态获取数据，简单修改就能使用
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
10-16
主要介绍了bootstrap-treeview实现多级树形菜单，后台JSON格式如何组织，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap样式的jquery-ztree
11-03
将原始jquery-ztree样式改为bootstrap风格，适合于做树形结构或者下拉列表，可单选多选
bootstrap-vue-treeview：用于Bootstrap和Vue.js 2.0+的treeview组件
02-05
npm install --save bootstrap-vue-treeview 入门 Webpack 如果使用Webpack捆绑器（推荐），则可以导入组件并在本地注册： import { bTreeView } from 'bootstrap-vue-treeview' [ ... ] components: { bTreeView...
bootstrap树 bootstrap-treeview完整例子
09-02
强烈建议初次使用bootstrap的人参考，例子很全...bootstrap树控件使用bootstrap-treeview.js实现树前边多选框checkbox 并实现， 0、获取选中的项 1、点击父级的多选框，自己默认选中 2、全选 3、反选 4、展开、 5、折叠
bootstrap treeview可搜索下拉树形
09-17
Bootstrap Treeview是一款基于jQuery和Bootstrap库的插件，它提供了美观且功能丰富的树形视图。这个特定的压缩包文件包含了一个实现可搜索下拉树形功能的示例，这在许多Web应用中非常有用，比如用于导航菜单、组织...
bootstrap-treeview
03-16
bootstrap-treeview是一个基于Bootstrap框架的树形结构插件，可以用于构建具有层次结构的导航菜单、目录结构等。它支持多种数据源，包括本地数据、JSON数据、XML数据等，可以通过简单的配置实现各种功能。同时，它还提供了丰富的事件和方法，方便开发者进行二次开发和定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值