Tree View

JqTree is a jQuery widget for displaying a tree structure in html. It supports json data, loading via ajax and drag-and-drop.

Page Demo Plugin Website

Basic example

Load a simple json data in javascript tree.

<div class="treeview"></div>
// Json tree
var treeviewData = [
    {
        name: 'node1',
        children: [
            {
                name: 'node1_1',
                children: [
                    { name: 'node1_1_1' },
                    { name: 'node1_1_2' },
                    { name: 'node1_1_3' }
                ]
            },
            { name: 'node1_2' },
            { name: 'node1_3' }
        ]
    },
    {
        name: 'node2',
        children: [
            { name: 'node2_1' },
            { name: 'node2_2' },
            { name: 'node2_3' }
        ]
    },
    {
        name: 'node3',
        children: [
            { name: 'node3_1' },
            { name: 'node3_2' },
            { name: 'node3_3' }
        ]
    }
];


// Initiate treeview
if($('.treeview')[0]) {
    $('.treeview').tree({
        data: treeviewData,
        closedIcon: $('<i class="zmdi zmdi-plus"></i>'),
        openedIcon: $('<i class="zmdi zmdi-minus"></i>')
    });
}

Expanded

Expand all hidden branches using autoOpen

<div class="treeview-expanded"></div>
// Json tree
var treeviewData = [
    {
        name: 'node1',
        children: [
            {
                name: 'node1_1',
                children: [
                    { name: 'node1_1_1' },
                    { name: 'node1_1_2' },
                    { name: 'node1_1_3' }
                ]
            },
            { name: 'node1_2' },
            { name: 'node1_3' }
        ]
    },
    {
        name: 'node2',
        children: [
            { name: 'node2_1' },
            { name: 'node2_2' },
            { name: 'node2_3' }
        ]
    },
    {
        name: 'node3',
        children: [
            { name: 'node3_1' },
            { name: 'node3_2' },
            { name: 'node3_3' }
        ]
    }
];


// Initiate treeview
if($('.treeview-expanded')[0]) {
    $('.treeview-expanded').tree({
        data: treeviewData,
        autoOpen: true,
        closedIcon: $('<i class="zmdi zmdi-plus"></i>'),
        openedIcon: $('<i class="zmdi zmdi-minus"></i>')
    });
}

Drag and drop

Add drag-and-drop support by setting the option dragAndDrop to true. You can now drag tree nodes to another position.

<div class="treeview-drag"></div>
if($('.treeview-drag')[0]) {
    $('.treeview-drag').tree({
        data: treeviewSimpleData,
        dragAndDrop: true,
        autoOpen: true,
        closedIcon: $('<i class="zmdi zmdi-plus"></i>'),
        openedIcon: $('<i class="zmdi zmdi-minus"></i>')
    });
}

autoEscape

You can put html in the node titles setting the autoEscape option to false

<div class="treeview-escape"></div>
if($('.treeview-escape')[0]) {
    $('.treeview-escape').tree({
        data: treeviewEscapeData,
        autoEscape: false,
        autoOpen: true,
        closedIcon: $('<i class="zmdi zmdi-plus"></i>'),
        openedIcon: $('<i class="zmdi zmdi-minus"></i>')
    });
}
Files required:
Type Files
Custom SCSS /src/scss/inc/vendor-overrides/_jqtree.scss
Javascript /src/js/vendors/jqtree.js
Library /resources/vendors/jqtree/jqtree.css /resources/vendors/jqtree/jqtree.js