如何在 Kendo 菜单中以编程方式 select 菜单项

Question

我有一个包含值的菜单，我想添加一个快捷键，select 该项目。

我可以证明in this fiddle我正在寻找的东西

function onSelect(e) {
    var item = $(e.item),
        menuElement = item.closest(".k-menu"),
        dataItem = this.options.dataSource,
        index = item.parentsUntil(menuElement, ".k-item").map(function () {
            return $(this).index();
        }).get().reverse();

    index.push(item.index());

    for (var i = -1, len = index.length; ++i < len;) {
        dataItem = dataItem[index[i]];
        dataItem = i < len-1 ? dataItem.items : dataItem;
    }

    alert(dataItem.value);
}

$(document).ready(function() {

    $("#menu").kendoMenu({
        dataSource: [
            {
                text: "Item 1 (A)",
                value: "A",
                items: [
                    {
                        text: "Sub Item 1 (L)",
                        value: "L",
                        items: [
                            {
                                text: "Sub Sub Item 1 (D)",
                                value: "D"
                            },
                            {
                                text: "Sub Sub Item 2 (E)",
                                 value: "E"
                            }
                         ]
                    },
                    {
                        text: "Sub Item 2 (O)",
                        value: "O"
                    }
                ]
            },
            {
                text: "Item 2 (F)",
                value: "F"
            },
            {
                text: "Item 3 (G)",
                value: "G"
            }
        ],
        select: onSelect
    });

    $(document.body).keydown(function (e) {
            var menu = $("#menu").kendoMenu().data("kendoMenu");
            if (e.altKey && e.keyCode == 76) {
                alert("select item with value L");
                // Pseudocode:
                // var item = find item with value L
                // menu.select(item); (or trigger)
            }
        }); 
});

我在任何地方都找不到任何资源可以做到这一点。此外，我无法通过数据源将 ID 分配给呈现的 "li"，这使得很难 select 菜单的节点。

有什么想法吗？

Answer 1

不确定 Kendo API 是否支持触发 select 项，但我能够使用 JQuery 通过键盘快捷键点击菜单项。

勾选这个JSFiddle

function clickMenuSpan(keyCode){
    var shortcut = String.fromCharCode(keyCode);

    $('#menu span.k-link').each(function(){
        var txt = $(this).text();

        if(txt.substr(-3) === '(' + shortcut + ')')
        {
            $(this).click();
        }

    })
}

您可以在按键事件中使用上述功能。并添加一些过滤器以仅针对您的快捷方式数组调用它。

 $(document.body).keydown(function (e) {
        var menu = $("#menu").kendoMenu().data("kendoMenu");
        if (e.altKey) {

            clickMenuSpan(e.keyCode);
        }
    });

如何在 Kendo 菜单中以编程方式 select 菜单项

How to select menu item programmatically in Kendo menu

kendo-ui

onkeydown

kendo-menu