Kendo contextMenu select 特定项目的功能

Question

我正在尝试使用 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" }
        ]
    }
]
});

但我想为每个项目指定一个函数，以便在单击该项目时执行。我不想根据文本内容来确定执行什么。

我试过在数据源中添加点击项，但似乎不起作用。

Answer 1

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 适当的项目并执行附件手动功能。

Answer 2

其他方法是添加 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;
                }

            }
        });

Answer 3

我知道这是旧的，但这是我实现它的方式

$("#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>

Kendo contextMenu select 特定项目的功能

Kendo contextMenu select function for specific items

jquery

kendo-ui

kendo-contextmenu