bootstrap风格的树形插件bootstrap treeview的API

 

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件，该jQuery插件基于Twitter Bootstrap。写这篇文章的目的在于记录下使用方法，以期后用。

一、插件官网：https://jquery-plugins.net/bootstrap-tree-view 
二、demo示例：http://jonmiles.github.io/bootstrap-treeview/

三、依赖：

1.  
   Bootstrap v3.3.4 (>= 3.0.0)
2.  
   jQuery v2.1.3 (>= 1.9.0)

四、使用方法：

1.html文件引入依赖:

1.  
   <link rel="stylesheet" href="css/bootstrap.min.css" />
2.  
   <link rel="stylesheet" href="css/bootstrap-treeview.min.css" />
3.  
   <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
4.  
   <script type="text/javascript" src="js/bootstrap.min.js" ></script>
5.  
   <script type="text/javascript" src="js/bootstrap-treeview.min.js" ></script>

2.设置一个DOM元素以接收树形数据：

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

3.使用格式：

$('#tree').treeview(options);  //其中options选项允许用户定制treeview的默认外观和行为。它们在初始化时作为一个对象被传递给插件。

4.使用示例(js动态获取后台数据，并渲染树形结构)：

1.  
   $(function() {
2.  
   $('#tree').treeview({
3.  
   data: getTree()//节点数据
4.  
   });
5.  
   })
6.  
    
7.  
   function getTree() {
8.  
   //节点上的数据遵循如下的格式：
9.  
   var tree = [{
10.  
    text: "Node 1", //节点显示的文本值 string
11.  
    icon: "glyphicon glyphicon-play-circle", //节点上显示的图标，支持bootstrap的图标 string
12.  
    selectedIcon: "glyphicon glyphicon-ok", //节点被选中时显示的图标 string
13.  
    color: "#ff0000", //节点的前景色 string
14.  
    backColor: "#1606ec", //节点的背景色 string
15.  
    href: "#http://www.baidu.com", //节点上的超链接
16.  
    selectable: true, //标记节点是否可以选择。false表示节点应该作为扩展标题，不会触发选择事件。 string
17.  
    state: { //描述节点的初始状态 Object
18.  
    checked: true, //是否选中节点
19.  
    /*disabled: true,*/ //是否禁用节点
20.  
    expanded: true, //是否展开节点
21.  
    selected: true //是否选中节点
22.  
    },
23.  
    tags: ['标签信息1', '标签信息2'], //向节点的右侧添加附加信息（类似与boostrap的徽章） Array of Strings
24.  
    nodes: [{
25.  
    text: "Child 1",
26.  
    nodes: [{
27.  
    text: "Grandchild 1"
28.  
    }, {
29.  
    text: "Grandchild 2"
30.  
    }]
31.  
    }, {
32.  
    text: "Child 2"
33.  
    }]
34.  
    }, {
35.  
    text: "Parent 2",
36.  
    nodes: [{
37.  
    text: "Child 2",
38.  
    nodes: [{
39.  
    text: "Grandchild 3"
40.  
    }, {
41.  
    text: "Grandchild 4"
42.  
    }]
43.  
    }, {
44.  
    text: "Child 2"
45.  
    }]
46.  
    }, {
47.  
    text: "Parent 3"
48.  
    }, {
49.  
    text: "Parent 4"
50.  
    }, {
51.  
    text: "Parent 5"
52.  
    }];
53.  
     
54.  
    return tree;
55.  
    }

五、其他说明：

1、参数详解（可用的参数）：var options = {

1.  
   data: data, //data属性是必须的，是一个对象数组 Array of Objects.
2.  
   color: "", //所有节点使用的默认前景色，这个颜色会被节点数据上的backColor属性覆盖. String
3.  
   backColor: "#000000", //所有节点使用的默认背景色，这个颜色会被节点数据上的backColor属性覆盖. String
4.  
   borderColor: "#000000", //边框颜色。如果不想要可见的边框，则可以设置showBorder为false。 String
5.  
   nodeIcon: "glyphicon glyphicon-stop", //所有节点的默认图标
6.  
   checkedIcon: "glyphicon glyphicon-check", //节点被选中时显示的图标 String
7.  
   collapseIcon: "glyphicon glyphicon-minus", //节点被折叠时显示的图标 String
8.  
   expandIcon: "glyphicon glyphicon-plus", //节点展开时显示的图标 String
9.  
   emptyIcon: "glyphicon", //当节点没有子节点的时候显示的图标 String
10.  
    enableLinks: false, //是否将节点文本呈现为超链接。前提是在每个节点基础上，必须在数据结构中提供href值。 Boolean
11.  
    highlightSearchResults: true, //是否高亮显示被选中的节点 Boolean
12.  
    levels: 2, //设置整棵树的层级数 Integer
13.  
    multiSelect: false, //是否可以同时选择多个节点 Boolean
14.  
    onhoverColor: "#F5F5F5", //光标停在节点上激活的默认背景色 String
15.  
    selectedIcon: "glyphicon glyphicon-stop", //节点被选中时显示的图标 String
16.  
     
17.  
    searchResultBackColor: "", //当节点被选中时的背景色
18.  
    searchResultColor: "", //当节点被选中时的前景色
19.  
     
20.  
    selectedBackColor: "", //当节点被选中时的背景色
21.  
    selectedColor: "#FFFFFF", //当节点被选中时的前景色
22.  
     
23.  
    showBorder: true, //是否在节点周围显示边框
24.  
    showCheckbox: false, //是否在节点上显示复选框
25.  
    showIcon: true, //是否显示节点图标
26.  
    showTags: false, //是否显示每个节点右侧的标记。前提是这个标记必须在每个节点基础上提供数据结构中的值。
27.  
    uncheckedIcon: "glyphicon glyphicon-unchecked", //未选中的复选框时显示的图标，可以与showCheckbox一起使用
28.  
    }

2、方法详解（可用的方法列表）：

1.  
   1. checkAll(options);//选中所有树节点
2.  
   2. checkNode(node | nodeId, options); //选中一个给定nodeId的树节点
3.  
   3. clearSearch();//清除查询结果
4.  
   4. collapseAll(options);//折叠所有树节点
5.  
   5. collapseNode(node | nodeId, options);//折叠一个给定nodeId的树节点和它的子节点
6.  
   6. disableAll(options);//禁用所有树节点
7.  
   7. disableNode(node | nodeId, options);//禁用一个给定nodeId的树节点
8.  
   8. enableAll(options);//激活所有树节点
9.  
   9. enableNode(node | nodeId, options);//激活给定nodeId的树节点
10.  
    10. expandAll(options);//展开所有节点
11.  
    11. expandNode(node | nodeId, options);//展开给定nodeId的树节点
12.  
    12. getCollapsed();//返回被折叠的树节点数组
13.  
    13. getDisabled();//返回被禁用的树节点数组
14.  
    14. getEnabled();//返回被激活的树节点数组
15.  
    15. getExpanded();//返回被展开的树节点数组
16.  
    16. getNode(nodeId);//返回与给定节点id相匹配的单个节点对象。
17.  
    17. getParent(node | nodeId);//返回给定节点id的父节点
18.  
    18. getSelected();//返回被选定节点的数组。
19.  
    19. getSiblings(node | nodeId);//返回给定节点的兄弟节点数组
20.  
    20. getUnselected();//返回未选择节点的数组
21.  
    21. remove();//删除the tree view component.删除绑定的事件，内部附加的对象，并添加HTML元素。
22.  
    22. revealNode(node | nodeId, options);//显示给定的树节点，将树从节点扩展到根。
23.  
    23. search(pattern, options);//在树视图中搜索匹配给定字符串的节点，并在树中突出显示它们。返回匹配节点的数组。
24.  
    24. selectNode(node | nodeId, options);//选择一个给定的树节点
25.  
    25. toggleNodeChecked(node | nodeId, options);//Toggles a nodes checked state; checking if unchecked, unchecking if checked.
26.  
    26. toggleNodeDisabled(node | nodeId, options);//切换节点的禁用状态;
27.  
    27. toggleNodeExpanded(node | nodeId, options);//切换节点的展开与折叠状态
28.  
    28. toggleNodeSelected(node | nodeId, options);//切换节点的选择状态
29.  
    29. uncheckAll(options);//不选所有节点
30.  
    30. uncheckNode(node | nodeId, options);//不选给定nodeId的节点
31.  
    31. unselectNode(node | nodeId, options);//不选给定nodeId的节点
32.  
     
33.  
    说明：可以通过两种方式来调用方法：
34.  
     
35.  
    1、插件包装器：插件的包装器可以作为访问底层方法的代理。
36.  
     
37.  
    $('#tree').treeview('methodName', args);
38.  
     
39.  
    其中，多个参数必须使用数组对象来传入。
40.  
     
41.  
    2、直接使用treeview：你可以通过下面两种方法中的一种来获取treeview对象实例：
42.  
     
43.  
    //该方法返回一个treeview的对象实例
44.  
    $('#tree').treeview(true).methodName(args);
45.  
     
46.  
    //对象实例也保存在DOM元素的data中， 可以使用'treeview'的id来访问它。
47.  
    $('#tree').data('treeview').methodName(args);

3、事件详解（可用的事件列表）：

1.  
   1. nodeChecked (event, node) - 一个节点被checked.
2.  
   2. nodeUnchecked (event, node) - 一个节点被unchecked.
3.  
   3. nodeCollapsed (event, node) - 一个节点被折叠.
4.  
   4. nodeDisabled (event, node) - 一个节点被禁用.
5.  
   5. nodeEnabled (event, node) - 一个节点被启用.
6.  
   6. nodeExpanded (event, node) - 一个节点被展开.
7.  
   7. nodeSelected (event, node) - 一个节点被选择.
8.  
   8. nodeUnselected (event, node) - 取消选择一个节点.
9.  
   9. searchComplete (event, results) - 搜索完成之后触发.
10.  
    10. searchCleared (event, results) - 搜索结果被清除之后触发.
11.  
     
12.  
    说明：事件的调用有两种方式：
13.  
     
14.  
    第 1 种：在参数中使用回调函数来绑定任何事件：
15.  
    $('#tree').treeview({
16.  
    //命名约定：以on为前缀，并将事件名的第一个字母转为大写，例如： nodeSelected -> onNodeSelected
17.  
    onNodeSelected:function(event, data) {
18.  
    // 事件代码...
19.  
    }
20.  
    });
21.  
     
22.  
    第 2 种：使用标准的jQuery .on()方法来绑定事件:
23.  
    $('#tree').on('nodeSelected',function(event, data) {
24.  
    // 事件代码...
25.  
    });