向 Kendo UI 上下文菜单项添加附加数据

Posted 2023-05-07

【中文标题】向 Kendo UI 上下文菜单项添加附加数据

【英文标题】：Adding additional data to Kendo UI Context Menu items

【发布时间】：2017-09-09 05:51:32

【问题描述】：

我想在我的应用程序中使用 Kendo UI 上下文菜单。我期待在菜单本身中显示文本的标准行为，但将不同的值（ID 或键）返回给 select 事件处理程序。

例如，菜单显示一个名称列表，但当我单击其中一个时，我会得到与该名称关联的 ID。

我尝试将除 text 之外的其他属性添加到上下文菜单中的项目数组中，但我在处理程序的事件对象上看不到它们。

我无法使用文本找到与其匹配的适当 ID，因为可能存在具有相同文本但 ID 不同的条目。

有什么想法吗？ 编辑：

目前我像这样构建上下文菜单：

open: (e) => 
    let itemKeys = [1, 2, 3];

    let menu = e.sender;
    menu.remove(".context-menu-item");
    menu.append(itemKeys.map((itemKey) => 
        return 
            text: "<div data-item-key='" + itemKey + "'>Test Text</div>",
            cssClass: "context-menu-item",
            encoded: false
        ;
    ));

虽然这个解决方案确实满足了我的需求，但它在 DOM 中添加了一个额外的元素，虽然微不足道，但并不完美......

【问题讨论】：

这个问题，一年多，刚刚被否决。投反对票的人能解释一下原因吗？

我试图投票，但澳大利亚的一切都被颠倒了

【参考方案1】：

它没有记录，但 ContextMenu 实际上继承自 Menu。因此，Menu 的所有选项都可用。特别是，您可以将attr 对象添加到您的数据项，参见example in the documentation。

完成你的例子：

open: (e) => 
    let itemKeys = [1, 2, 3];

    let menu = e.sender;
    menu.remove(".context-menu-item");
    menu.append(itemKeys.map((itemKey) => 
        return 
            text: "Test Text",
            cssClass: "context-menu-item",
            // add whatever attribute
            attr: 
                'data-item-key': itemKey
            
        ;
    ));

然后，在您的 select 处理程序中：

select: (e) => 
    console.log($(e.item).data('item-key'));

【讨论】：

谢谢，它成功了。你知道这个选项是什么时候添加的吗？我想我可能在一年前尝试过，但它没有用......无论如何，我更喜欢避免另一个 jQuery 调用，所以我使用了 attr: "item-key": itemKey 和 e.item.getAttribute("item-key")。

根据我的测试，它出现在版本2016.2.504中（2016.1.112中没有出现）。

【参考方案2】：

选项 1) 您可以添加一个数据来指定您的 ID。 我用 mvc 包装器做了这个，但它也可以用纯 javascript 来完成。

@(html.Kendo()
    .ContextMenu()
    .Name("contextMenuGridTicketTestiMessaggi")
    .Target("#gridTicketTestiMessaggi")
    .Filter("tr")
    .Orientation(ContextMenuOrientation.Vertical)
    .Items(items =>
    
        items.Add().Text("Update").HtmlAttributes(new  data_toggle = "update" );
        items.Add().Text("Save").HtmlAttributes(new  data_toggle = "save" );
        items.Add().Text("Delete").HtmlAttributes(new  data_toggle = "delete" );
    )
    .Events(e => 
        e.Select("contextMenuGridTicketTestiMessaggiSelect"); 
    ));

    var contextMenuGridTicketTestiMessaggiSelect = function(e) 
        var action = $(e.item).data("toggle");
        var that = this;
        if (action === "update") 
    ...

选项 2）您可以为每个项目（通过 html 内容）定义一个函数，以便在特定项目的每个 onClick 事件中调用。

items.Add().Encoded(false).Text("<span onclick='update()'>Update</span>");
items.Add().Encoded(false).Text("<span onclick='delete()'>Delete</span>");
...

更新

<div id="target">Target</div>
<ul id="context-menu"></div>
<script>
    $("#context-menu").kendoContextMenu(
        target: "#target",
        open: function(e) 
            let itemKeys = [1, 2, 3];

            let menu = e.sender;                 
            menu.remove(".context-menu-item");
            menu.setOptions(
                dataSource: itemKeys.map((itemKey) => 
                    return 
                        text: "<div data-item-key='" + itemKey + "' style='white-space: nowrap'>Test Text</div>",
                        cssClass: "context-menu-item",
                        encoded: false
                    ;
                )
            );
        ,
        select: function(e) 
           console.log($($(e.item).find("div")[0]).data("item-key"))                      
        
    );
</script>

【讨论】：

首先，感谢您的回答。 选项 1：这正是我想要做的，但在使用 Kendo UI ContextMenu 小部件时无法向项目添加 HTML 属性，至少据我所知。 选项 2：在我当前的解决方案中，我执行的操作与您的建议类似，但不是提供函数，而是在内部元素的属性中输入额外数据并在 select 事件中提取它.

不客气。我在我正在处理的当前 MVC 项目中使用了这些解决方案，并且两者都有效。这些解决方案不能满足我对清晰代码的痴迷，但我认为它不能以更好的方式完成。

问题是他们在 MVC 中工作，但第一个选项在 JS Kendo UI 中不可用，我有比第二个更好的解决方案...

我尝试了第一个解决方案并使用 js 以及您在列表项定义中定义数据属性：Target Item 1

我最初的问题并不完全清楚，但我动态设置了项目，而不是在 HTML 中。