Introduction

Bootstrap Tree is a jQuery plugin that create tree from HTML table

Dependencies

Bootstrap Treefy depends on the following:

"jquery": ">= 1.9.1",
"bootstrap": "~3.3.4",
"fontawesome": "~4.3.0"

Download

Source Code

Source, dist, and docs.

Download source (v.1.3.0)

Clone or fork via GitHub

Via Github (v.1.3.0)

Install with Bower

      $ bower install bootstrap-treefy
      

Quick Start

Column AColumn BColumn CColumn D
Node1cinfo
Node 1-1c info
Node1-2cinfo
Node2cinfo
      <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>