Menu 使用JSON添加Kendoui菜单

我试图使用JSON动态添加一个id属性为的子菜单项。最初，使用MVC创建菜单，如下所示：

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

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”拿出来

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

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

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是“菜单激活的”。没有添加

id

，因为它对剑道菜单没有任何意义。当您定义的菜单是

id

时，没有选项

那么，为什么在第一种情况下你有这个身份证？这很简单，因为您说了

HtmlAttributes（new{id=“AddDevice-20”}）

，这意味着它是一个HTML属性，而

Text（“Incoming”）

定义了剑道菜单属性。如果您有以下情况，情况会有所不同：

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

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

定义HTML属性就像说：

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

在这里，我创建了一个

span

元素，它的

id

是您想要的。下面对使用CSS类

ob菜单项的原因作一点解释

然后，创建新菜单项的功能是：

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
，将as
encoded
设置为
false
，让剑道用户界面知道这不是文本，而是HTML

如果在
中选择
方法，您需要检索
id
，现在只需执行以下操作：

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

其中，我使用CSS类
ob菜单项
在包含
id
的菜单项下查找子菜单项

您可以在此处看到一个示例：

此解决方案的优点是，您不需要操纵HTML元素，因此您可以使自己更加独立于KendoUI决定更改的内容。如果你试图模仿剑道UI使用的类别和元素，它们生成的代码中的任何更改都会破坏你的网站。他们在文档中发布的方法就像一个合同，他们不应该破坏这个合同，否则他们的所有客户机都将是updset。如果您使用他们的方法，那么您应该是安全的。
没有属性Id，这就是我使用HtmlAttributes的原因，它达到了我的目的。不管怎样，问题是“如何在函数KendoMenuAdd（）中使用JSON方法添加ID。OnaBai，我解决了自己的问题。我决定直接使用HTML：$（“#PSMenuDevice ul”）.append（“
菜单文本
”。明白了。谢谢你的回答。