0

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

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

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

4

3 回答 3

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

于 2015-04-22T15:13:15.813 回答
1

添加选择功能和切换案例的其他方式，当你有树视图时就是这种情况：

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

            }
        });
于 2017-05-08T13:48:01.757 回答
0

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

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

于 2020-04-23T09:05:53.710 回答