bootstrap-treeview

插件依赖

Bootstrap v3.0.3
jQuery v2.0.3

使用方法

首先要在页面中引入依赖文件和 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>

调用插件

该列表树插件最基本的调用方法如下：
最简单的树结构可以只有一个节点，使用一个带text属性的js对象来实现即可：

var tree = [{
    text: "Node 1"
}]
  $('#tree').treeview({
        data: tree,
        // 数据源
    })

数据结构

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

var tree = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1"
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  }
];
树

这种数据结构可以理解为数组与对象的嵌套

数组[
 	 对象{
			Nodes:数组[
						对象{
							}
					 ]
	   	}
	]

如果在js中通过循环来初始化树,按照正常操作数组和对象的方法即可
例子：

  var tree = []
    for (var i = 0;i <10 ; i++) {
        var obj = {}
        obj.text = i
        obj.nodes = [];
        tree[i]=(obj)
    }
    for (var j = 0;j <10 ; j++) {
        var obj = {}
        obj.text = j
        obj.nodes = [];
        tree[0].nodes[j]=(obj)
    }
    $('#tree').treeview({
        data: tree,
        // 数据源
    })

常用方法

• nodeChecked (event, node)：一个节点被checked。
• nodeExpanded (event, node)：一个节点被展开。
• nodeSelected (event, node)：一个节点被选择。

事件

• 你可以在参数中使用回调函数来绑定任何事件，或者使用标准的jQuery .on()方法来绑定事件。
• 在参数中调用的示例：

	$('#tree').treeview({
	  onNodeSelected: function(event, data) {
	    // 事件代码...
	//在节点被选择时加入一些业务操作
	});
	         

• 使用jQuery .on方法：

	$('#tree').on('nodeSelected', function(event, data) {
	  // 事件代码...
•```

expandAll(options)：展开所有的树节点。也可以展开任何给定级别的树节点。
Level为展开的节点深度，展开第几层的node
$('#tree').treeview('expandAll', { levels: 2, silent: true });
常见的功能 展开全部节点

详细的API描述