js tree example

by vaibhav saxena

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/jstree.min.js"></script>
<button id="jstreeFolderCreate" type="button" disabled>Create</button>
<button id="jstreeFolderRename" type="button" disabled>Rename</button>
<button id="jstreeFolderDelete" type="button" disabled>Delete</button>
<button id="jstreeSave" type="button">Save Tree</button>
<br>Shared with me
<div id="incoming-tree">
    <ul>
        <li id='001' data-id='001' data-jstree='{"type":"template"}'>Template 001</li>
        <li id='002' data-id='002' data-jstree='{"type":"campaign"}'>Campaign 002</li>
    </ul>
</div>
<div class="columns small-7">New Documents
    <div id="mynewdocs-tree">
        <ul>
            <li id='101' data-id='101' data-jstree='{"type":"template"}'>template 101</li>
            <li id='102' data-id='102' data-jstree='{"type":"campaign"}'>Campaign 102</li>
        </ul>
    </div>And my tree
    <div id="mydocs-tree">
        <ul>
            <li data-jstree='{"opened":true, "type":"folder"}'>Folder 1
                <ul>
                    <li id='201' data-id='201' data-jstree='{"type":"template"}'>Template 201</li>
                    <li id='202' data-id='202' data-jstree='{"type":"campaign"}'>Campaign 202 link <span class="is-icon-brush"> <a href="http://www.yoconta.com">yoconta</a> </span>

                    </li>
                </ul>
            </li>
            <li data-jstree='{"opened":true, "type":"folder"}'>Folder 2</li>
        </ul>
    </div>
</div>

CSS

/*
Share with me - only Copy- --done--
Share with me - Not Droppable- --done--
And my tree - Create new folder- --done--
And my tree - Delete new folder- --done--
And my tree - Rename new folder- --done--
And my tree - Operations Restict on type [folders,default]- --done--
And my tree - Save json on any change on tree- --Button--

JavaScript

$(function () {
		    $('#jstreeSave').click(function () {
		        var v = $("#mydocs-tree").jstree(true).get_json('#', {
		            'flat': true
		        });
		        var mytext = JSON.stringify(v);
		        console.log(v);
		        var ids = [];
		        for (var i in v) {
		            if (typeof (v[i].li_attr['data-id']) != "undefined") {
		                ids.push(v[i].li_attr['data-id']);
		            }
		        };
		        var uniqueIds = ids.filter(function (elem, pos) {
		            return ids.indexOf(elem) == pos;
		        });
		        console.log(uniqueIds);
		    })
		    $('#jstreeFolderCreate').click(function () {
		        var ref = $('#mydocs-tree').jstree(true),
		            sel = ref.get_selected();
		        if (!sel.length) {
		            return false;
		        }
		        sel = sel[0];
		        sel = ref.create_node(sel, {
		            "type": "file"
		        });
		        if (sel) {
		            ref.edit(sel);
		        }
		    });
		    $('#jstreeFolderRename').click(function () {
		        var ref = $('#mydocs-tree').jstree(true),
		            sel = ref.get_selected();
		        if (!sel.length) {
		            return false;
		        }
		        sel = sel[0];
		        ref.edit(sel);
		    });
		    $('#jstreeFolderDelete').click(function () {
		        var ref = $('#mydocs-tree').jstree(true),
		            sel = ref.get_selected();
		        if (!sel.length || !ref.get_node(sel).children.length == 0) {
		            return false;
		        }
		        ref.delete_node(sel);
		    });
		    $('#incoming-tree')
		        .jstree({
		        "core": {
		            "check_callback": function (o, n, p, pos, more) {
		                if (more && more.dnd && more.is_multi) {
		                    return false;
		                }
		                return true;
		            }
		        },
		            "types": {
		            "template": {
		                "valid_children": [],
		                    "icon":...