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 ContextMenu没有此功能，但您有2个选项：

首先，使用带有onclick事件的html配置上下文菜单：

<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配置中添加单击属性，然后在上下文菜单选择事件中，您可以在dataSource相应项目中搜索并手动执行附加功能。

Answer 2

我知道这很老了，但这是我实现它的方式

$("#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选择特定项目的功能

2 个答案: