Trirand jqGrid 没有出现； TypeError: $(...).jqGrid 不是函数答案

【问题标题】：Trirand jqGrid not showing up; TypeError: $(...).jqGrid is not a functionTrirand jqGrid 没有出现； TypeError: $(...).jqGrid 不是函数
【发布时间】：2015-01-25 08:44:16
【问题描述】：

网格未显示，firefox 控制台显示 “TypeError: $(...).jqGrid is not a function”。

ASP.NET MVC 5.2.2 剃刀， jQuery 2.1.1, Trirand jqGrid 4.6.0

我检查了其他类似的问题，每次问题看起来都不一样，要么是语法问题，要么是导入声明问题。我的看起来不错。所有引用的脚本都已到位。将其包装在 $( document ).ready() 事件中没有任何区别。感谢任何帮助。

<script type="text/css" src="@Url.Content("~/Content/themes/sunny/jquery-ui.sunny.min.css")">
</script>
<script type="text/css" src="@Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")">
</script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.1.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")"></script>

<script>
    $(function () {
        $("#list").jqGrid({
            url: "/Email/LoadDraftEmails/",
            datatype: "json",
            mtype: "GET",
            colNames: ["Id", "Subject", "Sender name", "Sender e-mail", "Created", "Last saved"],
            colModel: [
                { name: "ID", width: 50 },
                { name: "Subject", width: 200 },
                { name: "SenderName", width: 150 },
                { name: "SenderEmail", width: 150 },
                { name: "DateCreated", width: 150 },
                { name: "DateLatestSave", width: 150 }
            ],
            pager: "#pager",
            rowNum: 100,
            rowList: [10, 20, 30],
            sortname: "invid",
            sortorder: "desc",
            viewrecords: true,
            gridview: true,
            autoencode: true,
            caption: "Draft emails"
        });
    });
</script>

<body>
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>

【问题讨论】：

试着把grid.locale-en.js放在jquery.jqGrid.min.js之后

标签： jquery asp.net-mvc razor jqgrid

【解决方案1】：

我怀疑你所展示的只是整个 HTML 中被渲染的一小部分。也许有包含其他一些混合在一起的脚本的布局。

为确保不是这种情况，请暂时关闭布局并将整个标记显示在您的视图中：

@{
    Layout = null;
}

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/css" src="@Url.Content("~/Content/themes/sunny/jquery-ui.sunny.min.css")"></script>
    <script type="text/css" src="@Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.1.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")"></script>
    <script>
        $(function () {
            $("#list").jqGrid({
                url: "/Email/LoadDraftEmails/",
                datatype: "json",
                mtype: "GET",
                colNames: ["Id", "Subject", "Sender name", "Sender e-mail", "Created", "Last saved"],
                colModel: [
                    { name: "ID", width: 50 },
                    { name: "Subject", width: 200 },
                    { name: "SenderName", width: 150 },
                    { name: "SenderEmail", width: 150 },
                    { name: "DateCreated", width: 150 },
                    { name: "DateLatestSave", width: 150 }
                ],
                pager: "#pager",
                rowNum: 100,
                rowList: [10, 20, 30],
                sortname: "invid",
                sortorder: "desc",
                viewrecords: true,
                gridview: true,
                autoencode: true,
                caption: "Draft emails"
            });
        });
    </script>
</head>
<body>
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>
</html>

这应该正常工作。如果是这种情况，那么您应该查看哪些脚本引用可能会在您的布局中混淆，并确保呈现的页面看起来像此处所示。

【讨论】：

按照您的建议完成，网格出现了。非常感谢你，@Darin
@Lera：您有权每天投票最多 30 个答案或问题（请参阅here），但您在 15 个月内只使用了一次。通过使用您的投票权，您可以为搜索引擎提供提示，从而帮助人们在 stackoverflow 上查找信息。因此，请使用您的投票权并投票支持您认为有帮助的所有问题和答案。您在途中帮助页面的其他访问者。