Question

当我将鼠标悬停在带有子项的菜单项上时，从JQuery数据源对象加载一个kendo菜单时，弹出下拉列表，我得到“undefined is is a function”。

首先让我说这个stackoverflow问题中的顶层是否有效： how to load the kendoMenu dynamically using dataSource or json

我正在学习jQuery和Kendo，只是看不出有什么遗漏......

我确信我可以使用jQuery迭代我的模型对象并通过“手”加载菜单但是我不认为这是好的做法并且难以维护。

我的javascript是这个（它在顶层工作，直到我悬停）：

 $.get("/Home/getmenus", function (data) {
            $("#hmenu").kendoMenu({ dataSource: data })
            console.log(data);
        });

从我的API返回的对象如下所示：

[{"id":13,"text":"File","url":"File URL","items":[{"id":5,"text":"Create New Ticket","url":"xx"},{"id":6,"text":"Create New Project","url":"222"}]},{"id":16,"text":"Edit","url":"Edit URL","items":[]}]

再一次，我是新人，正在学习，只需要一点指导。

Answer 1

经过几个令人沮丧的时间后，我找到了解决方案，其中一个kendo js库中有一个错误，或者我只是使用了错误的错误。

当我使用这个库时：

<script src="~/Scripts/kendo/2014.1.318/kendo.menu.min.js"></script>

我收到上述错误。即使我使用简单的html ul / li / ul / li类型的菜单，其中我的查询中唯一的javascript是

$(document).ready(function () {
$("#menu").kendoMenu();
});

切换到使用后：

<script src="~/Scripts/kendo/2014.1.318/kendo.web.min.js"></script>

这开始按照您的预期运作。

所以这就是我构建分层菜单的方式，菜单项是通过我的api从SQL获取的:(效果很好，到目前为止还没有明显的额外性能命中

<link href="~/Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.1.318/kendo.flat.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/kendo/2014.1.318/kendo.core.min.js"></script>
<script src="~/Scripts/kendo/2014.1.318/kendo.data.min.js"></script>
<script src="~/Scripts/kendo/2014.1.318/kendo.web.min.js"></script>
<ul id="hmenu"></ul>
<script>
    $(document).ready(function () {
        $.get("/Home/getmenus", function (data) {
             hmenuelement = $("#hmenu");
            $.each(data, function (index, value)
            {
                hmenuelement.append("<li id='" + value.text + "'>" + value.text + "</li>")
                if (value.items.length > 0)
                {
                    var parentItem = $("#" + value.text);
                    parentItem.append("<ul id='" + value.text + index + "'></ul>");
                    childNode = $("#" + value.text + index);
                    $.each(value.items, function(index,value)
                    {
                        console.log(value);
                        childNode.append("<li>" + value.text + "</li>")
                    })
                }

            });
            (hmenuelement).kendoMenu();
        });
    });
</script>

带有子项的JQuery对象导致未定义的填充Kendo菜单

1 个答案: