javascript - 向 Kendo UI 上下文菜单项添加其他数据

Question

我想在我的应用程序中使用 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 添加了一个额外的元素，虽然微不足道，但并不完美......

Answer 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'));
}