Question

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

我可以证明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分配给渲染的＆＃34; li＆＃34;通过数据源，这使得很难选择菜单的节点。

有什么想法吗？

Answer 1

不确定Kendo API是否支持触发选择项，但我能够使用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();
        }

    })
}

您可以在keydown事件中使用上述功能。并添加一些过滤器，仅为您的快捷方式数组调用此方法。

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

            clickMenuSpan(e.keyCode);
        }
    });

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

1 个答案: