html-tree-view-ninotree

Hierarchical Tree With Radio Buttons Using Vanilla JS and Bootstrap | ninotree

by

ninotree is a tree rendering using Vanilla JS and Bootstrap featured by Fontawesome that dynamically renders a hierarchical tree of JavaScript arrays and objects. There is a radio button displayed at the beginning of each tree node, which enables you to handle selecting nodes just like in the form.

hierarchical tree structure in html, hierarchical tree structure in html css, treeview with checkbox in html, hierarchical tree structure in html bootstrap, create dynamic tree view using javascript

How to make use of it:

1. The library requires Bootstrap and Font Awesome for better UI.

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

2. Load the stylesheet ninotree.css and JavaScript ninotree.js within the doc.

<link rel="stylesheet" href="ninotree.css" />
<script src="ninotree.js"></script>

3. Create a container to carry the tree.

<div id='tree'></div>

4. Override the default tree information.

data: [
  {
      id: 1,
      name: 'A',
      selected: false,
      childs: [
          {
              id: 5,
              name: 'A-1',
              selected: true,
              childs: []
          },
          {
              id: 6,
              name: 'A-2',
              selected: false,
              childs: [
                  {
                      id: 7,
                      name: 'A2-1',
                      selected: false,
                      childs: []
                  }
              ]
          },
          {
              id: 8,
              name: 'A-3',
              selected: false,
              childs: []
          }
      ]
  },
  {
      id: 2,
      name: 'B',
      selected: false,
      childs: [
          {
              id: 3,
              name: 'B-1',
              selected: false,
              childs: []
          },
          {
              id: 4,
              name: 'B-2',
              selected: false,
              childs: []
          }
      ]
  }
],

Hierarchical Tree With Radio Buttons, ninotree Plugin/Github, horizontal tree structure in html css, dynamic tree view with checkboxes, html tree view

See Demo And Download

Download

Official Website(nvaghari): Click Here

This superior jQuery/javascript plugin is developed by nvaghari. For extra Advanced Usages, please go to the official website.

Leave a Comment