jQuery多级列表树插件bootstrap-treeview

所属分类:导航-文件树

 33022  84  查看评论 (21)
jQuery多级列表树插件bootstrap-treeview ie兼容10

简要教程

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="./css/bootstrap.css" rel="stylesheet">
 
<!-- Required Javascript -->
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap-treeview.js"></script>

HTML结构

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

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

调用插件

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

function getTree() {
    // Some logic to retrieve, or generate tree structure
    return data;
}
$('#tree').treeview({data: getTree()});

数据结构

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

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"
  }
];

最简单的树结构可以只有一个节点,使用一个带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的默认外观和行为。参数使用一个对象来在插件初始化时传入:

// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$('#tree').treeview({
  data: data,         // data is not optional
  levels: 5,
  backColor: 'green'
});


参数名称参数类型默认值描述
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):搜索结果被清除之后触发。


相关插件-文件树

动态JSON树形菜单

根据特定的json格式生成无限级树形菜单
  文件树
 13008  43

纯javript实用多级目录树结构插件

aimaraJS是一款非常实用的纯javript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都
  文件树
 17872  34

带有复选框可折叠的树形结构

该插件是我改良的layer的树形插件,在原始的layer插件中的树形结构是没有复选框的,经我修改后可用以拿来做权限系统的权限选择
  文件树
 15684  78

jQuery目录树插件jtree

jQuery目录树、文件树插件jtree,带搜索功能
  文件树
 2256  20

讨论这个项目(21)回答他人问题或分享插件使用方法奖励jQ币

    Think_Fish 0
    2017/6/23 15:54:52
    徽州小方0 0
    2017/5/26 14:40:48

    data异步加载,怎么解决?

    回复
    思源 0
    2017/5/4 22:43:52

    您好,您能给一个如何使用href功能的例子么?enableLinks,data,href,我搭配的时候怎么没有功能反应。data数组里面是每个字节点的URL指么?

    回复
    齿轮 0
    2017/4/27 12:28:08

    作者,在互联网断开的情况下,树效果就会失效,不会显示树列表。这个要怎么解决?我想做与互联网不相连的局域网的网页,增加一些TreeView来分类。 

        西瓜0
        2017/4/27 12:54:37

        把外部调用的bootstrap-3.3.4.css和jquery.min.js改成本地的就行了。

        齿轮0
        2017/4/27 14:00:53

        你是指"

        <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
        <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">

        在我问这个之前,就把两个分别改成"js/bootstrap-treeview.min.js"和"css/bootstrap-treeview.css",并进行了测试,但是没用,树列表还是不显示,你能说说具体一点嘛?

        齿轮0
        2017/4/27 14:03:26

        分别改成"src/css/bootstrap-treeview.css"和"src/js/bootstrap-treeview.js"也测试过,但是树表不显示

        齿轮0
        2017/4/27 14:05:42

        连着网都不显示

        齿轮0
        2017/4/27 14:46:08

        能说具体一点吗,到底是哪几个标签的src和hrel所指的内容改成本地的哪个.js和.css文件的相对地址,才能正确的离线显示? 

        西瓜0
        2017/4/27 14:55:54

        你要把这两个文件下载到你对应该目录中啊,下载包中没有这两个文件,你直接改地址当然调用不到了。

    回复
    0
    2017/4/25 12:53:23

    为什么下载了  没法使用

    回复
    JustNickname 0
    2017/3/31 14:17:12

    可否有点击父节点,子节点全都被选中的事件或者方法?!

    回复
    JustNickname 0
    2017/3/31 13:30:25

    可以在每个节点处添加一个checkbox嘛?

    回复
    团队机器人 0
    2017/2/24 14:42:06
    小王 0
    2017/2/23 10:31:39

    非常好用的插件,效果好看,而且还有使用教程。。。。

    最最重要的是还免费!!!

    支持作者,你辛苦了。。。。

    真的很好用!

    回复
    G胡渣大叔 0
    2017/2/14 11:15:11

    我想知道怎么点击能容发请求呢??

    回复
取消回复