我不想在 child 下添加任何其他内容

Question

我有一个动态树结构。我可以向这个名为“Montaj、Kaynak、Parça 和 Sarf”的树结构中添加 3 个元素。

我的问题：添加Parça 和Sarf 后，其下无法添加任何内容。例如，可以在 Montaj 和 Kaynak 下添加所有内容，但是一旦添加 Parça 或 Sarf，下面什么都不能加。

我该怎么做？（有些术语是土耳其语。不要介意）我当前的代码如下

$(function() {
    a = 1;
    var jsondata = [
        {
            "id": "1",
            "parent": "#",
            "text": "TEKLİF ADI"
        }
    ];

    createJSTree(jsondata);
});

function createJSTree(jsondata) {
    $('#agac').jstree({
        "core": {
            "check_callback": true,
            'data': jsondata,
        },
        "plugins": ["contextmenu", "state", "types"],
        "contextmenu": {
            "items": function($node) {
                var tree = $("#agac").jstree(true);
                return {
                    "EKLE": {
                        "separator_before": false,
                        "separator_after": true,
                        "label": "EKLE",
                        "action": false,
                        "submenu": {
                            "MONTAJ": {
                                "seperator_before": false,
                                "seperator_after": false,
                                "label": "MONTAJ",
                                action: function(obj) {
                                    $node = tree.create_node($node, {
                                        text: 'M0' + a++,
                                        type: 'folder'
                                    });
                                    tree.deselect_all();
                                    tree.select_node($node);
                                }
                            },
                            "KAYNAK": {
                                "seperator_before": false,
                                "seperator_after": false,
                                "label": "KAYNAK",
                                action: function(obj) {
                                    $node = tree.create_node($node, {
                                        text: 'K0' + a++,
                                        type: 'folder'
                                    });
                                    tree.deselect_all();
                                    tree.select_node($node);
                                }
                            },
                            "PARÇA": {
                                "disabled": true,
                                "seperator_before": false,
                                "seperator_after": false,
                                "label": "PARÇA",
                                action: function(obj) {
                                    $node = tree.create_node($node, {
                                        text: 'P0' + a++,
                                        type: 'file',
                                        icon: 'glyphicon glyphicon-file'
                                    });
                                    tree.deselect_all();
                                    tree.select_node($node);
                                }
                            },
                            "SARF": {
                                "seperator_before": true,
                                "seperator_after": true,
                                "label": "SARF",
                                action: function(obj) {
                                    $node = tree.create_node($node, {
                                        text: 'S0' + a++,
                                        type: 'file',
                                        icon: 'glyphicon glyphicon-file'
                                    });
                                    tree.deselect_all();
                                    tree.select_node($node);
                                }
                            }
                        }
                    },
                    "DEĞİŞTİR": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": "DEĞİŞTİR",
                        "action": function(obj) {
                            tree.edit($node);
                        }
                    },
                    "KALDIR": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": "KALDIR",
                        "action": function(obj) {
                            tree.delete_node($node);
                            a--;
                        }
                    }
                };
            }
        }
    });
}

Answer 1

如果您想阻止人们在 Parça 和 Sarf 项下创建任何新节点，则仅在用户 right-clicks 时显示 EKLE 菜单选项在您希望将它们添加到的节点上。

首先，您需要能够区分文件夹项目和普通项目，这意味着您需要定义您的 types...

"plugins": ["contextmenu", "state", "types"],
"types": { // ** NEW **
  "default": {},
  "folder": {}
},
"contextmenu": {

我还为您的初始根对象指定了 folder 类型，这对于更改的主要部分是必需的...

var jsondata = [
    {
        "id": "1",
        "parent": "#",
        "text": "TEKLİF ADI",
        "type": "folder" // ** NEW **
    }
];

最大的变化是 context-menu 只显示必要的内容。

因此，我没有创建具有所有选项的对象，而是创建了一个空对象并根据需要添加内容。在这种情况下，如果您单击的 $node 具有 folder 类型，您将获得 EKLE sub-menu... 否则它不可见。

（如果不定义配置的 types 部分，$node.type 将始终为 default）

"items": function($node) {
    var tree = $("#agac").jstree(true);
    // ** NEW **
    var items = {};
    // Only show if a folder
    if ($node.type == "folder") {
        items["EKLE"] = {
            ...
        }
    }
    // Always show
    items["DEĞİŞTİR"] = {
        ...
    }
    items["KALDIR"] = {
        ...
    }
    return items;
}

要查看完整的工作版本，请展开以下代码片段...

$(function() {
    a = 1;
    var jsondata = [
        {
            "id": "1",
            "parent": "#",
            "text": "TEKLİF ADI",
            "type": "folder" // ** NEW **
        }
    ];

    createJSTree(jsondata);
});

function createJSTree(jsondata) {
    $('#agac').jstree({
        "core": {
            "check_callback": true,
            'data': jsondata,
        },
        "plugins": ["contextmenu", "state", "types"],
        "types": { // ** NEW **
          "default": {},
          "folder": {}
        },
        "contextmenu": {
            "items": function($node) {
                var tree = $("#agac").jstree(true);
                // ** NEW **
                var items = {};
                // Only show if a folder
                if ($node.type == "folder") {
                    items["EKLE"] = {
                        "separator_before": false,
                        "separator_after": true,
                        "label": "EKLE",
                        "action": false,
                        "submenu": {
                            "MONTAJ": {
                                "seperator_before": false,
                                "seperator_after": false,
                                "label": "MONTAJ",
                                action: function(obj) {
                                    $node = tree.create_node($node, {
                                        text: 'M0' + a++,
                                        type: 'folder'
                                    });
                                    tree.deselect_all();
                                    tree.select_node($node);
                                }
                            },
                            "KAYNAK": {
                                "seperator_before": false,
                                "seperator_after": false,
                                "label": "KAYNAK",
                                action: function(obj) {
                                    $node = tree.create_node($node, {
                                        text: 'K0' + a++,
                                        type: 'folder'
                                    });
                                    tree.deselect_all();
                                    tree.select_node($node);
                                }
                            },
                            "PARÇA": {
                                "disabled": true,
                                "seperator_before": false,
                                "seperator_after": false,
                                "label": "PARÇA",
                                action: function(obj) {
                                    $node = tree.create_node($node, {
                                        text: 'P0' + a++,
                                        type: 'file',
                                        icon: 'glyphicon glyphicon-file'
                                    });
                                    tree.deselect_all();
                                    tree.select_node($node);
                                }
                            },
                            "SARF": {
                                "seperator_before": true,
                                "seperator_after": true,
                                "label": "SARF",
                                action: function(obj) {
                                    $node = tree.create_node($node, {
                                        text: 'S0' + a++,
                                        type: 'file',
                                        icon: 'glyphicon glyphicon-file'
                                    });
                                    tree.deselect_all();
                                    tree.select_node($node);
                                }
                            }
                        }
                    }
                }
                // Always show
                items["DEĞİŞTİR"] = {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "DEĞİŞTİR",
                    "action": function(obj) {
                        tree.edit($node);
                    }
                }
                items["KALDIR"] = {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "KALDIR",
                    "action": function(obj) {
                        tree.delete_node($node);
                        a--;
                    }
                }
                return items;
            }
        }
    });
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
<div id="agac"></div>

我不想在 child 下添加任何其他内容

I don't want to add anything else under the child

javascript

jquery

ajax

jstree