BootStrap TreeView
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" style="margin-top:30px;">
<div class="row">
<div class="col-md-4">
<ul id="tree1">
<p class="well" style="height:135px;"><strong>Initialization no parameters</strong>
<br /> <code>$('#tree1').treed();</code>
</p>
<li><a href="#">TECH</a>
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li>XRP
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-4">
<p class="well" style="height:135px;"><strong>Initialization optional parameters</strong>
<br /> <code>$('#tree2').treed({openedClass : 'glyphicon-folder-open', closedClass : 'glyphicon-folder-close'});</code>
</p>
<ul id="tree2">
<li><a href="#">TECH</a>
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li>XRP
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-4">
<p class="well" style="height:135px;"><strong>Initialization optional parameters</strong>
<br /> <code>$('#tree3').treed({openedClass:'glyphicon-chevron-right', closedClass:'glyphicon-chevron-down'});</code>
</p>
<ul id="tree3">
<li><a href="#">TECH</a>
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li>XRP
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
.tree, .tree ul {
margin:0;
padding:0;
list-style:none
}
.tree ul {
margin-left:1em;
position:relative
}
.tree ul ul {
margin-left:.5em
}
.tree ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid
}
.tree li {
margin:0;
padding:0 1em;
line-height:2em;
color:#369;
font-weight:700;
position:relative
}
.tree ul li:before {
content:"";
display:block;
width:10px;
height:0;
border-top:1px solid;
margin-top:-1px;
position:absolute;
top:1em;
left:0
}
.tree ul li:last-child:before {
background:#fff;
height:auto;
top:1em;
bottom:0
}
.indicator {
margin-right:5px;
}
.tree li a {
text-decoration: none;
color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
text-decoration: none;
color:#369;
border:none;
background:transparent;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
outline: 0;
}
Is there any possibility to place a link besides every item ?,for instance,TECH (view), Company Maintenance (view),etc …,thanks,,,,1. how save the state?,2. how to word-break the titles in the tree?,The author is SeanWessell





