剑道菜单选择问题答案

【问题标题】：Kendo Menu selection issue剑道菜单选择问题
【发布时间】：2015-11-17 14:01:50
【问题描述】：

我有一个剑道菜单来动态启用或禁用剑道网格列。当我从 KendoMenu 中选择选项时，选择会触发两次。我在下面创建了演示版本。

$("#menu").kendoMenu({
dataSource: [{
    text: "Menu",
    items: ds
}],
openOnClick: true,
closeOnClick: false,
open: function () {
    var selector;
    $.each(grid.columns, function () {
        if (this.hidden) {
            selector = "input[data-field='" + this.field + "']";
            $(selector).prop("checked", false);
        }
    });
},
select: function (e) {
    // don't show/hide for menu button --- calling twice
    if ($(e.item).parent().filter("div").length) return;

    console.log("******");

    var input = $(e.item).find("input.check");
    var field = $(input).data("field");
    if ($(input).is(":checked")) {
        grid.showColumn(field);
    } else {
        grid.hideColumn(field);
    }
}});

在选择菜单项时检查控制台日志。

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid kendo-menu

【解决方案1】：

将复选框添加到菜单项似乎会导致 kendo 触发菜单单击和复选框检查的事件。似乎很难区分这两个实例，因此最好做一些不同的事情来指示检查。可以使用以下图标 - 可能使用对勾图标而不是实际的复选框：

http://demos.telerik.com/kendo-ui/styling/icons

【讨论】：

我试过 openOnClick = false。当我选择菜单项时，它仍然会触发两次。您可以查看 jsfiddler 版本。
感谢您提供演示（不确定您之前是否有过，但我没有注意到）。如果我注释掉“打开”事件，它只会触发一次并且似乎提供相同的功能。似乎在 open 事件中设置 checked 属性会导致 select 事件触发。打开事件代码的目的是什么？就像我说的，删除它似乎并没有改变行为。
即使在删除“open”事件后，单击菜单项时，事件也会被触发两次。在鼠标悬停时，我们会看到指针光标触发两次，朝向右侧的光标会触发一次，但对复选框没有任何操作。
有趣。我只是单击复选框（不是完整的菜单项）。如果你这样做，它只会触发一次。但是，您是对的，单击完整菜单项会触发两次。我会玩它，看看是否有办法防止这种情况发生。
对不起，我最初错过了你的观点。在玩了一点之后，似乎是在菜单 html 中添加了复选框。 Kendo 必须将事件连接到菜单和复选框。如果您只是将菜单更改为列名文本（没有复选框），它只会触发一次。我将用不同的策略更新我的答案。

【解决方案2】：

我已经用更新的code 解决了这个问题

$("#menu").kendoMenu({
dataSource: [{
    text: "Menu",
    items: ds
}],
openOnClick: true,
closeOnClick: false,
open: function () {
    var selector;
    $.each(grid.columns, function () {
        if (this.hidden) {
            selector = "input[data-field='" + this.field + "']";
            $(selector).prop("checked", false);
        }
    });
},
select: function (e) {
    // don't show/hide for menu button
    if ($(e.item).parent().filter("div").length) return;
    var removeItemFlag = false;
    var input = $(e.item).find("label");
    var selectedValue = input[0].innerHTML;

    if(selectedValue)
    {
        for(var i=0; i< droplist.length; i++){
            if(droplist[i] === selectedValue){
                removeItemFlag = true
                input[0].classList.remove = "fa fa-check-square-o";
                input[0].className = "fa fa-square-o";
                break;
            }
        }
        var selectedIndex = droplist.indexOf(selectedValue);
        if (selectedIndex > -1 && removeItemFlag) {
            droplist.splice(selectedIndex, 1);
             grid.hideColumn(selectedValue);

        }else{
            droplist.push(selectedValue);
            grid.showColumn(selectedValue);
            input[0].className = "fa fa-check-square-o";
        }
    }
}

});

【讨论】：