jquery 如何在自定义jsTree上下文菜单中实现复制粘贴功能？

q1qsirdb 于 2023-06-05 发布在 jQuery

关注(0)|答案(1)|浏览(172)

我想要一个静态JSON数据的jsTree视图，在上下文菜单中应该有一个On Create选项，它应该给予两个选择，即。文件/文件夹，然后重命名，删除和编辑按钮，其中它将显示复制，剪切和粘贴。
当我使用默认的上下文菜单时，它不会在Create中显示文件/文件夹的任何选项，当我试图为所有功能实现自定义代码时，我不知道如何在jsTree中复制，粘贴。
下面是我的代码：

<!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>

试图从jsTree文档中解决这个问题，但没有适当的文档可用。

jquery

来源：https://stackoverflow.com/questions/76384470/how-can-i-implement-copy-paste-functionality-in-a-custom-jstree-context-menu

1条答案

按热度按时间

h9vpoimq1#

经过多次尝试，我终于得到了代码，为我工作

<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>

希望这将有助于充分在未来

赞(0）回复(0）举报 2023-06-05

我来回答

jquery 如何在自定义jsTree上下文菜单中实现复制粘贴功能？

1条答案

相关问题

热门标签

最新问答