Question

我有一个动态的树状结构。我可以在此树结构中添加3个元素，称为“ Montaj，Kaynak，Parça和Sarf”。

我的问题：添加了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项目下创建任何新节点，则仅当用户右键单击以下节点时，才显示EKLE菜单选项您希望将它们添加到其中。

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

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

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

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

最大的变化是使上下文菜单仅显示必要的内容。

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

（在未定义配置的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>

我不想在孩子下方添加其他任何内容

1 个答案: