""BootTree" TreeView for Bootstrap"
Bootstrap 3.3.0 Snippet by Umar

<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"> <div class="panel panel-default"> <div class="panel-heading">Treeview List</div> <div class="panel-body"> <!-- TREEVIEW CODE --> <ul class="treeview"> <li><a href="#">Tree</a> <ul> <li><a href="#">Branch</a></li> <li><a href="#">Branch</a> <ul> <li><a href="#">Stick</a></li> <li><a href="#">Stick</a></li> <li><a href="#">Stick</a> <ul> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a> <ul> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> </ul> </li> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a></li> </ul> </li> <li><a href="#">Stick</a></li> </ul> </li> <li><a href="#">Branch</a></li> <li><a href="#">Branch</a></li> </ul> </li> </ul> <!-- TREEVIEW CODE --> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Treeview Div</div> <div class="panel-body"> <!-- TREEVIEW CODE --> <div class="treeview"> <ul> <li><a href="#">Tree</a> <ul> <li><a href="#">Branch</a></li> <li><a href="#">Branch</a> <ul> <li><a href="#">Stick</a></li> <li><a href="#">Stick</a></li> <li><a href="#">Stick</a> <ul> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a> <ul> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> </ul> </li> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a></li> </ul> </li> <li><a href="#">Stick</a></li> </ul> </li> <li><a href="#">Branch</a></li> <li><a href="#">Branch</a></li> </ul> </li> </ul> </div> <!-- TREEVIEW CODE --> </div> </div> <!-- This section only includes notes for the snippet. Nothing more. You may ignore it if you please. --> <div class="panel panel-default"> <div class="panel-heading">Notes</div> <div class="panel-body"> <p> This is a revised fork of an existing Bootsnippet. It allows the use of multiple treeview panels, as well as limiting the width/height of treeviews. The plugin also dynamically converts DOM elements with the <span class="label label-success">treeview</span> class assigned. The snippet will be edited by request should viewers want a theme-compatible version of the example. Since it requires LESS to acquire settings from the bootstrap theme, it will only be supplied in a <span class="label label-danger">code</span> block. </p> <hr /> <p></p><a href="http://bootsnipp.com/snippets/featured/bootstrap-30-treeview" class="btn btn-primary">BootStrap TreeView <span class="badge">by SeanWessell</span></a></p> </div> </div> </div>
div.panel:first-child { margin-top:20px; } div.treeview { min-width: 100px; min-height: 100px; max-height: 256px; overflow:auto; padding: 4px; margin-bottom: 20px; color: #369; border: solid 1px; border-radius: 4px; } div.treeview ul:first-child:before { display: none; } .treeview, .treeview ul { margin:0; padding:0; list-style:none; color: #369; } .treeview ul { margin-left:1em; position:relative } .treeview ul ul { margin-left:.5em } .treeview ul:before { content:""; display:block; width:0; position:absolute; top:0; left:0; border-left:1px solid; /* creates a more theme-ready standard for the bootstrap themes */ bottom:15px; } .treeview li { margin:0; padding:0 1em; line-height:2em; font-weight:700; position:relative } .treeview ul li:before { content:""; display:block; width:10px; height:0; border-top:1px solid; margin-top:-1px; position:absolute; top:1em; left:0 } .tree-indicator { margin-right:5px; cursor:pointer; } .treeview li a { text-decoration: none; color:inherit; cursor:pointer; } .treeview li button, .treeview li button:active, .treeview li button:focus { text-decoration: none; color:inherit; border:none; background:transparent; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; outline: 0; }
/** * BootTree Treeview plugin for Bootstrap. * * Based on BootSnipp TreeView Example by Sean Wessell * URL: http://bootsnipp.com/snippets/featured/bootstrap-30-treeview * * Revised code by Leo "LeoV117" Myers * */ $.fn.extend({ treeview: function() { return this.each(function() { // Initialize the top levels; var tree = $(this); tree.addClass('treeview-tree'); tree.find('li').each(function() { var stick = $(this); }); tree.find('li').has("ul").each(function () { var branch = $(this); //li with children ul branch.prepend("<i class='tree-indicator glyphicon glyphicon-chevron-right'></i>"); branch.addClass('tree-branch'); branch.on('click', function (e) { if (this == e.target) { var icon = $(this).children('i:first'); icon.toggleClass("glyphicon-chevron-down glyphicon-chevron-right"); $(this).children().children().toggle(); } }) branch.children().children().toggle(); /** * The following snippet of code enables the treeview to * function when a button, indicator or anchor is clicked. * * It also prevents the default function of an anchor and * a button from firing. */ branch.children('.tree-indicator, button, a').click(function(e) { branch.click(); e.preventDefault(); }); }); }); } }); /** * The following snippet of code automatically converst * any '.treeview' DOM elements into a treeview component. */ $(window).on('load', function () { $('.treeview').each(function () { var tree = $(this); tree.treeview(); }) })

Related: See More


Questions / Comments: