javascript - 我不想在孩子下面添加任何其他内容
问题描述
我有一个动态的树结构。我可以在这个树结构中添加 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--;
}
}
};
}
}
});
}
解决方案
如果您想阻止人们在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>推荐阅读
- mysql - SQL 范围的自动增量
- angular - 我如何给primeng自动完成占位符一个浮动标签功能？Angular 9 + PrimeNg
- ios - 导出内部 iOS 应用程序导出按钮不起作用
- .net - 如何检查特定表的每个存储库命中的特定列？
- spring-boot - Spring Boot JdbcTemplate 无法确定正确的调用签名 - 多个过程/函数/签名
- javascript - 事件总线 vuejs 不发出事件以将数据传递给组件
- flutter - 在颤动中测试/模拟文件IO
- ibm-appid - 需要帮助首先在 kubernetes 和 istio 上设置 ibm appid
- jquery - 动态设置 iframe 的 src 以延迟加载
- typescript - 为什么是 () => 承诺
可分配给 () => void?