Tree View

Tree view are powered by Jstree Plugin, that provides interactive trees with drag & drop option, inline edition, custom design and many options.

JS Tree Documentation.

How to Create a Tree View?

1. Add specific css and javascript

Add inside head this css file:

<link href="assets/plugins/jstree/src/themes/default/style.min.css" rel="stylesheet"> 

Add inside body at the end of your page, before main template scripts:

<script src="assets/plugins/jstree/jstree.min.js"></script>

2. Create your list

Method 1

You can create your list inside html, like a basic list like this:

<div id="my-tree">
    <ul >
        <li>
            <a href="#">My videos</a>
            <ul>
                <li><a href="#">Video 1</a></li>
                <li><a href="#">Video 2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">My pictures</a>
            <ul>
                <li><a href="#">Picture 1</a></li>
                <li><a href="#">Picture 2</a></li>
            </ul>
        </li>
        <li><a href="#">My files</a></li>
        <li><a href="#">My documents</a>
    </ul>
</div>

After, you have to initiate plugin like this:

$('#tree2').jstree();

Method 2

Another method is to create all your tree directly in javascript. In your html page, you just have:

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

And in your script page, you will have your list, with text, icons option for each element and state (open, selected). Here is an example

$('#my-tree').jstree({
    'core': {
        'data': [{
                'text': 'My pictures',
                "icon": "fa fa-picture-o c-red",
                'state': {
                    'selected': false
                }
            }, {
                'text': 'My videos',
                "icon": "fa fa-film c-red",
                'state': {
                    'opened': true,
                    'selected': false
                },
                'children': [{
                    'text': 'Video 1',
                    "icon": "fa fa-film c-red"
                }, {
                    'text': 'Video 2',
                    "icon": "fa fa-film c-red"
                }]
            }

        ]
    }
});

Checkbox Option

If you want to add checkbox before each element, you add "plugins": ["checkbox"] in your script:

$('#my-tree').jstree({
    'core': {
        // Your core content, idem as last example
    },
    "plugins": ["checkbox"]
});

Drap & Drop Option

If you want to add drag and drop option, you will have to add "plugins": ["dnd"] in your script:

$('#my-tree').jstree({
    'core': {
        // Your core content, idem as last example
    },
    "plugins": ["dnd"]
});