BooTree

A simple solution for displaying check-boxes in hierarchical tree structures (i.e. a Tree View) with Amazing Bootstrap.

Dependencies

For UI better experiece, Include following dependencies:

1. jQuery v2.1.3 (>= 1.9.0)
2. Bootstrap v3.3.4 (>= 3.0.0)

Getting Started

Installation

Include the following files in your project.

1. bootree.min.css
2. bootree.min.js

Usage

Add the following resources in your html file.

  <!-- Required Stylesheets -->
  <link href="../dist/bootree.min.css" rel="stylesheet" type="text/css" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <!-- Required Javascript -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="../dist/bootree.min.js" type="text/javascript"></script>

The component will bind to any existing DOM element.

	<div id="tree"></div>

To initialize the BooTree and plot the check-boxes in #tree:

    <script type="text/javascript">
            $(document).ready(function () {
                var tree = $('#tree').tree({
                    primaryKey: 'id',
                    uiLibrary: 'bootstrap',
                    dataSource: [ { id: 1, text: 'Apple', children: [ { id: 2, text: 'Avocado' } ] } ]
                    checkboxes: true
                });
                $('#btnSave').on('click', function () {
                    var checkedIds = tree.getCheckedNodes();
                    alert(checkedIds);
                });
            });
    </script>

Example

You can see BooTree here.