2

我正在尝试使用 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”。

4

1 回答 1

0

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

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

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让Kendo UI 知道这不是文本而是 HTML。HTMLencodedfalse

如果在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 使用的类和元素，它们生成的代码中的任何更改都会破坏您的网站。他们在文档中发布的方法就像他们不应该破坏的合同，否则他们的所有客户都会感到不安。如果您使用他们的方法，那么您应该是安全的。

于 2013-07-05T21:54:31.177 回答