Question

我正在尝试使用JSON动态添加带有id属性的子菜单项。最初，菜单是使用MVC创建的，如下所示：

children.Add().Text("Incoming")
              .HtmlAttributes(new { id = "AddDevice-20" }).Enabled(false);

我可以在选中时抓住“id”。

然而，在客户端，我通过JavaScript添加子菜单，如下所示：

function KendoMenuAdd(menuName, menuId, parentIndex) {
        var menuData = $("#Menu").data("kendoMenu");
        var menuItemToAdd = [{ text: menuName, id: menuId }];
        var parent = $("#Menu").children("li").eq(parentIndex);
        menuData.append(menuItemToAdd, parent);

    }

子菜单已成功添加，但“id”未成功添加。当我调试时，id为“Menu_mn_active”。

Answer 1

未添加id，因为它对于剑道菜单没有任何意义。定义id的菜单时没有选项。

那么，为什么在第一种情况下你有那个id？很简单，因为您说HtmlAttributes(new { id = "AddDevice-20" })表示它是HTML属性，而Text("Incoming")定义了Kendo菜单属性。如果你有类似的东西会有所不同：

children.Add()
        .Text("Incoming")
        .Id("AddDevice-20")
        .Enabled(false);

定义HTML属性就像说：

<li id="AddDevice-20">Incoming</li>

区别在于id成为li的属性。

编辑如果您当然需要id，那么您可能要做的是定义使用包含id元素的模板。类似的东西：

<script id="my-template" type="text/kendo-ui">
    <span id="${id}" class='ob-menu-item'>${text}</span>
</script>

我在哪里创建一个span元素id就是你想要的。使用CSS类ob-menu-item的原因有点贬低。

然后创建新菜单条目的功能是：

function KendoMenuAdd(menuName, menuId, parentIndex) {
    var template = kendo.template($("#my-template").html());
    var menuData = $("#Menu").data("kendoMenu");
    menuData.insertAfter({ text: template({ text: menuName, id: menuId}), 
                           encoded: false }, parentIndex);
}

技巧正在将值text设置为使用模板生成的HTML，并将encoded设置为false以让Kendo UI知道这不是文本而是HTML。

如果在select方法中您需要检索id，现在就像这样简单：

select : function (e) {
    alert("the id is:" + $(".ob-menu-item", e.item).attr("id"));
}

我使用CSS类ob-menu-item在包含id的菜单项下查找子项。

您可以在此处查看示例：http://jsfiddle.net/OnaBai/6KVRh/

此解决方案的优点是您不会操纵HTML元素，因此您可以使自己更加独立于任何Kendo UI决定更改的内容。如果您尝试模仿Kendo UI使用的clases和元素，则他们生成的代码中的任何更改都将破坏您的网站。他们在文档中发布的方法就像是一个他们不应该破坏的合同，或者他们的所有客户都将被更新。如果你使用他们的方法，那么你应该是安全的。

使用JSON添加Kendoui菜单

1 个答案: