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> 
 
<div class="columns small-7">New Documents
    <div id="mynewdocs-tree">
       
    </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 () {
		 
		    $('#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": "icon-brush"
		            },
		                "campaign": {
		                "valid_children": [],
		                    "icon": "icon-megaphone"
		            },
		                "#": {
		                "valid_children": []
		            }
		        },
		            "dnd": {
		            "always_copy": true
		        },
		            "plugins": ["types", "dnd", "wholerow", "Unique"]
		    });
 

		    // listen for event
		    $('#mydocs-tree')
.on("click","li.jstree-node a",function(){
    document.location.href = this; 
})
            .on('select_node.jstree Event', function...