d2d.emegrendeles.hu/resources/views/admin/productGroup/index.blade.php

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script id="ScriptJsTree" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div class="moduleContent adminProductGroup ui-widget-content">
        <div class="row">
            <div class="col-6">
                <div id="tree"   ></div>
            </div>
            <div class="col-6 treeNodeContent">
                tartalmi resz
            </div>
        </div>


</div>

<script>


APP.initProductGroupTree=function (){
    $('#tree')
        .jstree({
            'core' : {
                strings : {
                    'New node': 'Új elem'
                },
                'multiple':false,
                'data' : {
                    'url' : '{{route('admin.productGroup.Tree.getNode')}}',
                    'method':'POST',
                    'data' : function (node) {
                        return { 'id' : node.id,'_token':'{{csrf_token()}}' };
                    }
                },
                'check_callback' : function(o, n, p, i, m) {
                    if(m && m.dnd && m.pos !== 'i') { return false; }
                    if(o === "move_node" || o === "copy_node") {
                        if(this.get_node(n).parent === this.get_node(p).id) { return false; }
                    }
                    return true;
                },
                'themes' : {
                    'responsive' : false,
                    'variant' : 'small',
                    /*'stripes' : true*/
                }
            },
            'sort' : function(a, b) {
                return this.get_type(a) === this.get_type(b) ? (this.get_text(a).localeCompare(this.get_text(b),undefined, {sensitivity: 'variant'})) : (this.get_type(a) >= this.get_type(b) ? 1 : -1);
                //return this.get_type(a) === this.get_type(b) ? (this.get_text(a).toLowerCase() > this.get_text(b).toLowerCase() ? 1 : -1) : (this.get_type(a) >= this.get_type(b) ? 1 : -1);
                //return this.get_text(a).localeCompare(this.get_text(b),undefined, {sensitivity: 'base'});
            },
            'contextmenu' : {
                'items' : function(node) {
                    var tmp = $.jstree.defaults.contextmenu.items();
                    tmp.create.label = "Új";
                    tmp.rename.label='Átnevezés';
                    tmp.remove.label='Törlés';
                    delete tmp.ccp;
                    if(node.original.depth>2){
                        delete tmp.create;
                        return tmp;
                    }
                    return tmp;
                }
            },
            'types' : {
                'default' : { 'icon' : 'folder' },
                'file' : { 'valid_children' : [], 'icon' : 'file' }
            },
            'unique' : {
                'duplicate' : function (name, counter) {
                    return name + ' ' + counter;
                }
            },
            'plugins' : ['state','dnd','sort','types','contextmenu','unique']
        })
        .on('delete_node.jstree', function (e, data) {
            debug(data);
            let url = '{{ route("admin.productGroup.Tree.delete", ":id") }}';
            url = url.replace(':id', data.node.id);
            $.post(url,{
                "_token":"{{csrf_token()}}",
                'id' : data.node.id,
            })
                .done(function () {
                    data.instance.refresh();
                })
                .fail(function () {
                    data.instance.refresh();
                });

            /*
            $.get('?operation=delete_node', { 'id' : data.node.id })
                .fail(function () {
                    data.instance.refresh();
                });

             */
        })
        .on('create_node.jstree', function (e, data) {
            data.instance.set_id(data.node, 'tmp_'+Date.now());
            $.post('{{route('admin.productGroup.Tree.createNew')}}', {
                "_token":"{{csrf_token()}}",
                'type' : data.node.type, 'ownerId' : data.node.parent, 'text' : data.node.text
                })
                .done(function (d) {
                    data.instance.set_id(data.node, d.id);
                })
                .fail(function () {
                    data.instance.refresh();
                });

        })
        .on('rename_node.jstree', function (e, data) {
            let parentNode=data.instance.get_node(data.node.parent);
            let url = '{{ route("admin.productGroup.Tree.rename", ":id") }}';
            url = url.replace(':id', data.node.id);
            $.post(url,{
                "_token":"{{csrf_token()}}",
                'id' : data.node.id,
                'name' : data.text,
                'parents':data.node.parents
                })
                .done(function (d) {
                    data.instance.set_id(data.node, d.id);
                    data.instance.set_type(data.node, d.type);
                    if(parentNode.original.depth>1){
                        data.instance.set_icon(data.node, 'jstree-file');
                    }else{
                        data.instance.set_icon(data.node, 'jstree-folder');
                    }
                })
                .fail(function (d) {
                    //ajaxErrorFieldHandler()
                    //console.error(d);
                    data.instance.refresh();
                });
        })
        .on('move_node.jstree', function (e, data) {
            let parentNode=data.instance.get_node(data.node.parent);
            let url = '{{ route("admin.productGroup.Tree.move", ":id") }}';
            url = url.replace(':id', data.node.id);
            $.post(url,{
                "_token":"{{csrf_token()}}",
                'id' : data.node.id,
                'parent':data.parent
            })
                .done(function () {
                    data.instance.refresh();
                })
                .fail(function () {
                    data.instance.refresh();
                });

        })
        .on('copy_node.jstree', function (e, data) {
            $.get('?operation=copy_node', { 'id' : data.original.id, 'parent' : data.parent })
                .done(function (d) {
                    //data.instance.load_node(data.parent);
                    data.instance.refresh();
                })
                .fail(function () {
                    data.instance.refresh();
                });
        })
        .on('changed.jstree', function (e, data) {
            if(data && data.selected && data.selected.length &&data.selected!=1) {
                let url = '{{ route("admin.productGroup.Tree.getNodeContent", ":id") }}';
                url = url.replace(':id', data.selected);
                $.ajax({
                    url:url,
                    method:"POST",
                    data:{
                       "_token":"{{csrf_token()}}",
                       "id":data.selected
                    },
                    beforeSend:function (){
                        $('.moduleContent.adminProductGroup').find('.treeNodeContent').html(data.node.text+' betöltése');
                    },
                    success: function (data){
                        $('.moduleContent.adminProductGroup').find('.treeNodeContent').html(data);
                    }
                });
            }
            else {
                $('#data .content').hide();
                $('#data .default').html('Select a file from the tree.').show();
            }
        })
        .on("dblclick.jstree", function (event,data) {
            //selected node $("#tree").jstree().get_selected(true)
            var node=$("#tree").jstree().get_selected(true);
            var id=$("#tree").jstree().get_selected();
            debug(node);
            debug(id);
        });
    ;

}

if(!$.fn.jstree){
    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js',
        function(){
            APP.initProductGroupTree();
        }
    );
}else{
    APP.initProductGroupTree();
}


</script>