Smooth Collapsible Tree View Plugin with jQuery - TreeViewJS

TreeViewJS is a jQuery plugin that takes data from a big nested list or JSON strings and presents them in an expanding and collapsing tree view.

Basic usage:

1. Include the jQuery TreeViewJS plugin after jQuery library.

<script src="jquery.min.js"></script>
<script src="jquery.treeView.js"></script>

2. Create a nested list for the tree view.

<ul class="treeview">
  <li> item 1
    <ul>
      <li>subitem 1</li>
      <li>subitem 2</li>
    </ul>
  </li>
  <li>Foo Item</li>
  <li> Countries
    <ul>
      <li>United States
        <ul>
          <li>New York</li>
          <li>San Francisco</li>
          <li>Chicago</li>
          <li>Los Angeles</li>
        </ul>
      </li>
      <li>United Kingdom</li>
      <li>China</li>
      <li>India
        <ul>
          <li>New Delhi</li>
          <li>Mumbai</li>
          <li>Chennai</li>
          <li>Kolkata</li>
        </ul>
      </li>
      <li>Russia</li>
      <li>France</li>
      <li>Germany</li>
    </ul>
  </li>
</ul>

3. Initialize the tree view plugin and done.

$('.treeview').treeView();

4. Present your JSON data in the tree view.

<code id="treeModel">
JSON DATA HERE
</code>

<ul class="treeview" id="dataTree"></ul>

<script>
// load the data tree
var $dataTree = $('#dataTree');
var model = JSON.parse($('#treeModel').html());
$dataTree.treeView(model);
</script>

5. Style the tree view.

.treeview,
.treeview ul {
  list-style-type: none;
  overflow: hidden;
}

.treeview li {
  text-indent: 1%;
  margin-top: 0.2em;
  padding: 0.15em 0 0.5em 1.5em;
  line-height: 22px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

.treeview li.contains-items { background-image: url('icons/arrow-left.png'); }

.treeview li.items-expanded { background-image: url('icons/arrow-down.png'); }

.treeview>li:hover { cursor: pointer; }

.treeview span:hover { background-color: rgba(246, 246, 246, 0.7); }

6. Functions.

// Expands all the nodes of treeviews
$('.treeview').treeView('expandAll');

// Collapses all the nodes of treeviews
$('.treeview').treeView('collapseAll');

7. Default options.

// treeview data model
model: null, 

// use <span> to build model
useSpan: false, 

// add icons to nodes
imageList: [], 

// the tree is expanded
expanded: false 

Changelog:

2015-02-18

• Add more configuration options namely, model, useSpan, imageList and expanded
• TreeNode icons
• Fixed model buliding bug

2015-02-16

• Fix scroll on small screens
• More configurable editor

---

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