Make Admin Template Documentation

## 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"]
    });