Kendo contextMenu select 特定项目的功能
Kendo contextMenu select function for specific items
我正在尝试使用 kendoContextMenu 小部件创建一个 contextMenu。这可以使用以下代码。
$("#contextMenu").kendoContextMenu({
target: "#tree",
filter: ".k-item",
select: function(e) {
alert("Selected");
},
dataSource:
[
{ text: "Item1"},
{
text: "SubMenu1",
items: [
{ text: "Item1" }
]
},
{
text: "SubMenu2",
items: [
{ text: "Item1" }
]
}
]
});
但我想为每个项目指定一个函数,以便在单击该项目时执行。我不想根据文本内容来确定执行什么。
我试过在数据源中添加点击项,但似乎不起作用。
Kendo 上下文菜单没有此功能,但您有 2 个选项:
首先,使用 html 和 onclick
事件配置上下文菜单:
<ul id="menu">
<li>
Option 1
<ul>
<li onclick="alert('test');">Sub option 1</li>
<li>Sub option 2</li>
</ul>
</li>
<li>Option 2</li>
</ul>
<script>
$(document).ready(function() {
$("#menu").kendoContextMenu({
orientation: orientation,
});
};
});
</script>
其次,如果可以确保名称的唯一性,可以在 dataSource
配置中添加点击属性,然后在上下文菜单 select 事件中搜索 dataSource
适当的项目并执行附件手动功能。
其他方法是添加 select 功能和切换大小写,这是当您有树视图时的情况:
$("#menu").kendoContextMenu({
select: function (e) {
var button = $(e.item);
var node = $(e.target);
var tmpKendDiagram = $(".diagram").data("kendoDiagram");
var tv = $(".tree-view").data("kendoTreeView");
var item = tv.dataItem(node);
var textSelect = $(e.item).children(".k-link").text();
switch (textSelect) {
case '1option':
//do stuff
break;
case '2option':
//do stuf
break;
default:
break;
}
}
});
我知道这是旧的,但这是我实现它的方式
$("#context-menu").kendoContextMenu({
target: "#target",
select: function(e) {
let index = $(e.item).index();
e.sender.options.dataSource[index].click(e);
},
dataSource: [
{text: "Copy",
click: function(e) {
console.log("copied");
}
},
{text: "Delete",
click: function(e) {
console.log("deleted");
}
}
]
});
<link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
<div id="target">Target</div>
<div id="context-menu"></div>
我正在尝试使用 kendoContextMenu 小部件创建一个 contextMenu。这可以使用以下代码。
$("#contextMenu").kendoContextMenu({
target: "#tree",
filter: ".k-item",
select: function(e) {
alert("Selected");
},
dataSource:
[
{ text: "Item1"},
{
text: "SubMenu1",
items: [
{ text: "Item1" }
]
},
{
text: "SubMenu2",
items: [
{ text: "Item1" }
]
}
]
});
但我想为每个项目指定一个函数,以便在单击该项目时执行。我不想根据文本内容来确定执行什么。
我试过在数据源中添加点击项,但似乎不起作用。
Kendo 上下文菜单没有此功能,但您有 2 个选项:
首先,使用 html 和 onclick
事件配置上下文菜单:
<ul id="menu">
<li>
Option 1
<ul>
<li onclick="alert('test');">Sub option 1</li>
<li>Sub option 2</li>
</ul>
</li>
<li>Option 2</li>
</ul>
<script>
$(document).ready(function() {
$("#menu").kendoContextMenu({
orientation: orientation,
});
};
});
</script>
其次,如果可以确保名称的唯一性,可以在 dataSource
配置中添加点击属性,然后在上下文菜单 select 事件中搜索 dataSource
适当的项目并执行附件手动功能。
其他方法是添加 select 功能和切换大小写,这是当您有树视图时的情况:
$("#menu").kendoContextMenu({
select: function (e) {
var button = $(e.item);
var node = $(e.target);
var tmpKendDiagram = $(".diagram").data("kendoDiagram");
var tv = $(".tree-view").data("kendoTreeView");
var item = tv.dataItem(node);
var textSelect = $(e.item).children(".k-link").text();
switch (textSelect) {
case '1option':
//do stuff
break;
case '2option':
//do stuf
break;
default:
break;
}
}
});
我知道这是旧的,但这是我实现它的方式
$("#context-menu").kendoContextMenu({
target: "#target",
select: function(e) {
let index = $(e.item).index();
e.sender.options.dataSource[index].click(e);
},
dataSource: [
{text: "Copy",
click: function(e) {
console.log("copied");
}
},
{text: "Delete",
click: function(e) {
console.log("deleted");
}
}
]
});
<link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
<div id="target">Target</div>
<div id="context-menu"></div>