TreeGrid Bootstrap 2.3.2 examples
| Root node 1 | Additional info |
| Node 1-1 | Additional info |
| Node 1-2 | Additional info |
| Node 1-2-1 | Additional info |
| Root node 2 | Additional info |
| Node 2-1 | Additional info |
| Node 2-2 | Additional info |
| Node 2-2-1 | Additional info |
Source
<link href="bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="../css/jquery.treegrid.css">
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.tree').treegrid();
});
</script>
Bootstrap grid example
table-bordered table-striped table-condensed
with custom expander
| Root node 1 | Additional info |
| Node 1-1 | Additional info |
| Node 1-2 | Additional info |
| Node 1-2-1 | Additional info |
| Root node 2 | Additional info |
| Node 2-1 | Additional info |
| Node 2-2 | Additional info |
| Node 2-2-1 | Additional info |
Source
<link href="bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="../css/jquery.treegrid.css">
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.tree').treegrid({
expanderExpandedClass: 'icon-minus-sign',
expanderCollapsedClass: 'icon-plus-sign'
});
});
</script>