Dynamic Hierarchical Tree Plugin For jQuery - BooTree

BooTree is an easy tree plugin that dynamically renders hierarchical tree structures with support for programmatical check, uncheck, collapse, expand, etc. Styled with the latest Bootstrap framework.

See also:

• 10 Best Tree View jQuery Plugins

How to use it:

1. Load the Bootstrap's stylesheet and bootree.min.css in the head section of the document.

<link href="/path/to/bootree.min.css" rel="stylesheet">
<link href="/path/to/bootstrap.min.css" rel="stylesheet">

2. Create a placeholder element for the tree.

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

3. Load jQuery library and the bootree.min.js at the end of the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootree.min.js"></script>

4. Prepare your hierarchical data to be rendered in the tree.

const myData = [{ 
      id: 1, 
      text: 'Apple', 
      children: [{ 
        id: 2, 
        text: 'Avocado' 
      }] 
      },{ 
      id: 3, 
      text: 'Banana', 
      children: [{ 
        id: 4, 
        text: 'Beans' 
      },{ 
        id: 5, 
        text: 'Broccoli',
        children: [{ 
          id: 6, 
          text: 'Bunch Grape' 
        }]
      }]
}]

5. The JavaScript to generate the tree.

const myTree = $('#tree').tree({
      primaryKey: 'id',
      dataSource: myData,
      checkboxes: true
});

6. Get the selected node.

myTree.getCheckedNodes();

---

This awesome jQuery plugin is developed by jaideepghosh. For more Advanced Usages, please check the demo page or visit the official website.