vTree jQuery Plugin Examples

Download This Plugin Back To jQueryScript

A jQuery plugin designed to visualize JSON data into expandable and collapsible tree structures, such as folder directories, family trees, or organization hierarchies.

Simple View

          $('#simple-list').vTree({url: 'data.json'});
        

Specific View

          $('#list').vTree({
            url: 'data.json',
            clickSelector: 'a',
            onLeafShow: function (el, data) { el.append('<a href="javascript:;">'+data.leaf_id+'</a> '+data.name); }
          });
        

Catalog View

          $('#catalog').vTree({
            url: 'data.json',
            config: 'v-catalog',
            clickSelector: 'a',
            onLeafShow: function (el, data) { el.append('<a href="javascript:;">'+data.name+'</a>'); }
          });
        

Tree View

          $('#tree').vTree({
            url: 'data.json',
            config: 'v-tree',
            setLeaf: function () {
              return $('<div style="border: 1px solid black; background: #eee; padding: 5px;"><a class="leaf-body" href="javascript:;"></a><div>');
            }
          });