Trirand jqGrid not showing up; TypeError: $(…).jqG

2019-05-23 03:45发布

问题:

Grid is not displaying, firefox console shows "TypeError: $(...).jqGrid is not a function".

ASP.NET MVC 5.2.2 Razor, jQuery 2.1.1, Trirand jqGrid 4.6.0

I've checked other similar questions, each time the problem seems different and it's either syntax or import declarations problem. Mine seem fine. All referenced scripts are in place. Wrapping it in $( document ).ready() event doesn't make any difference. Appreciate any help.

<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>

回答1:

I suspect that what you have shown is only a small portion of the entire HTML that gets rendered. Maybe there's the Layout which contains some other scripts that are mixing up.

To make sure that this is not the case, turn off the Layout temporary and have the entire markup in your view:

@{
    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>

This should normally work as expected. If this is the case you should then see what script references might be getting mixed up in your Layout and ensure that the rendered page will look as shown here.