Bootstrap Tree is a jQuery plugin that create tree from HTML table
Bootstrap Treefy depends on the following:
"jquery": ">= 1.9.1",
"bootstrap": "~3.3.4",
"fontawesome": "~4.3.0"
Source, dist, and docs.
$ bower install bootstrap-treefy
Column A | Column B | Column C | Column D | |
---|---|---|---|---|
Node | 1 | c | info | |
Node | 1-1 | c | info | |
Node | 1-2 | c | info | |
Node | 2 | c | info |
<table class="table" id="table">
<thead>
<tr>
<th></th><th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
</tr>
</thead>
<tbody>
<tr data-node="treetable-1">
<td><input type="checkbox" name="row.id"/></td>
<td>Node</td><td>1</td><td>c</td><td>info</td>
</tr>
<tr data-node="treetable-2" data-pnode="treetable-parent-1">
<td><input type="checkbox" name="row.id"/></td>
<td>Node</td> <td>1-1</td><td>c</td> <td>info</td>
</tr>
<tr data-node="treetable-3" data-pnode="treetable-parent-1">
<td><input type="checkbox" name="row.id"/></td>
<td>Node</td><td>1-2</td><td>c</td><td>info</td>
</tr>
<tr data-node="treetable-4">
<td><input type="checkbox" name="row.id"/></td>
<td>Node</td><td>2</td><td>c</td><td>info</td>
</tr>
</tbody>
</table>
<script>
$(function() {
$("#table").treeFy({
treeColumn: 1
});
});
</script>