TechQA.

How can I implement copy-paste functionality in a custom jsTree context menu?

124 views Asked by At

I want a jsTree view from static JSON data where in context menu there should be option of On Create it should give two choices i.e. file/folder, then Rename, Delete, and Edit button in which it will show copy, cut and paste.

When I am using default context menu then its not showing any option for file/folder in Create and when I am trying to implement custom code for all functionalities then I am not getting how to do copy, paste in jsTree.

Here is my code:-

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Simple root node" },
                           { "id": "ajson2", "parent": "#", "text": "Root node 2" },
                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
            ];

            createJSTree(jsondata);
        });

        function createJSTree(jsondata) {
            $('#SimpleJSTree').jstree({
                "core": {
                    "check_callback": true,
                    'data': jsondata
                    
                },
                "plugins": ["contextmenu"],
                "contextmenu": {
                    "items": function ($node) {
                        var tree = $("#SimpleJSTree").jstree(true);
                        return {
                            "Create": {
                                "separator_before": false,
                                "separator_after": true,
                                "label": "Create",
                                "action": false,
                                "submenu": {
                                    "File": {
                                        "seperator_before": false,
                                        "seperator_after": false,
                                        "label": "File",
                                        action: function (obj) {
                                            $node = tree.create_node($node, { text: 'New File', type: 'file', icon: 'glyphicon glyphicon-file' });
                                            tree.deselect_all();
                                            tree.select_node($node);
                                        }
                                    },
                                    "Folder": {
                                        "seperator_before": false,
                                        "seperator_after": false,
                                        "label": "Folder",
                                        action: function (obj) {
                                            $node = tree.create_node($node, { text: 'New Folder', type: 'default' });
                                            tree.deselect_all();
                                            tree.select_node($node);
                                        }
                                    }
                                }
                            },
                            "Rename": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Rename",
                                "action": function (obj) {
                                    tree.edit($node);                                    
                                }
                            },
                            "Remove": {
                                "separator_before": false,
                                "separator_after": false,
                                "label": "Remove",
                                "action": function (obj) {
                                    tree.delete_node($node);
                                }
                            }
                        };
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="SimpleJSTree"></div>
</body>
</html>

Trying to solve this problem from jsTree documentation but there is no proper documentation available.

jquery treeview copy-paste jstree
Original Q&A
1

There are 1 answers

0
Arup Ranjan Sahoo On

After so many tries finally I got the code which works for me

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>Simple jsTree</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Simple root node" },
                           { "id": "ajson2", "parent": "#", "text": "Root node 2" },
                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
            ];

            createJSTree(jsondata);
        });

        function createJSTree(jsondata) {            
            $('#SimpleJSTree').jstree({
                "core": {
                    "check_callback": true,
                    'data': jsondata
                },
                "plugins": ["contextmenu"],
                contextmenu: {
                    items: function($node) {
                        
        var defaultItems = $.jstree.defaults.contextmenu.items(); // Get the default menu items

        var tree = $("#SimpleJSTree").jstree(true);

        

        var data = $("#SimpleJSTree").jstree().get_selected(true)[0];
        console.log(data.original.type)


        defaultItems.create = {
            "separator_before": false,
            "separator_after": true,
            label: 'Create',
      submenu: {
        file: {
            "seperator_before": false,
             "seperator_after": false,
          label: 'File',
          action: function (obj) {
           
           


            var newNode = { text: 'New File', type: 'file', icon: 'glyphicon glyphicon-file' };
            tree.create_node($node, newNode, 'last', function (newNode) {
                  tree.edit(newNode);
                 });

          }
        },
        folder: {
          label: 'Folder',
          action: function (data) {
           


            var newNode = { text: 'New Folder', type: 'default' };
          tree.create_node($node, newNode, 'last', function (newNode) {
                  tree.edit(newNode);
                });
          }
        }
      }
        }

         // Remove the "Create" option if the selected node is a file
         if (data.original.type === 'file') {
                            delete defaultItems.create;
                        }

        return defaultItems;
      }
    }
            })

            .on('changed.jstree', function (e, data) {
                var path = data.instance.get_path(data.node,'/');
             $("#path").text(path)
            })

        }
    </script>
</head>
<body>
    <div id="SimpleJSTree" style="width: 20%; "></div>
    <div id="path" style="margin-left: 40%; margin-top: 50px;"></div>
</body>
</html>

Hope this will be help full in future

Related Questions in JQUERY

Related Questions in TREEVIEW

Related Questions in COPY-PASTE

Related Questions in JSTREE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions