bootstrap-treeview使用

1.导库

<script src="static/js1/menu/bootstrap.min.js"></script>
<script src='static/js1/menu/jquery-1.9.1.min.js'></script>
<script src="static/bootstrap3/js/bootstrap-treeview.js"></script>
<link type="text/css" rel="stylesheet" href="static/bootstrap3/js/bootstrap-treeview.css">

2.前端代码

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

3.js代码

3.1.静态数据

var defaultData = [
		          {
		            text: 'Parent 1',
		            href: '#parent 1',
		            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']
		              }
		            ]
		          }];
$('#tree').treeview({data: defaultData}）;

3.2.动态异步加载数据

$.ajax({
		        type: "POST",
		        url: '<%=basePath%>xxx/xxx.do',  
		        dataType: "json",
		        success: function (result) {
		            $('#tree').treeview({
		                data: result,// 数据源
		                levels : 2,//默认展开级别
		                enableLinks : true,//必须在节点属性给出href属性
		                color: '#FFFF00',
		                selectedColor:'#000000',
		                selectedBackColor:'#F5F5F5',
		                expandIcon: 'glyphicon glyphicon-chevron-right',
          				collapseIcon: 'glyphicon glyphicon-chevron-down',
          				nodeIcon: 'glyphicon glyphicon-bookmark',
		                onNodeChecked : function (event,node) {
		                    
		                },
		                onNodeUnchecked : function(event, node) { //取消选中节点
		                    
		                },
		                
		                onNodeExpanded : function(event, data) {
		                        
		                },
		                    
		                onNodeSelected: function (event, data) {
		                    //alert(data.nodeId);
		                }
		                    
		            });
		        }
			});