Jqgrid 不呈现并且在调试时显示 Undefined is not a function 错误

Question

我正在尝试在我的项目中添加一个 JQgrid，当我尝试使用简单的 HTML 页面进行演示时，它显示了网格，但是当我将相同的代码部分添加到 MVC 应用程序时查看网格未呈现。当我调试时，它显示 jqGrid() 未定义。这是我的代码...

<html>
    <head>

   <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
         <script type="text/javascript">
             $.jgrid.no_legacy_api = true;
             $.jgrid.useJSON = true;
    </script>
    <script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $("#reportList").jqGrid(
    {
        url: '',
        datatype: "json",
        mtype: 'GET',
        colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department', 'Age', 'Salary', "Address", 'Marital Status'],
        colModel: [
        { name: 'EmloyeeId', index: 'EmloyeeId', width: 20, stype: 'text' },
        { name: 'FName', index: 'FName', width: 150 },
        { name: 'LName', index: 'LName', width: 150 }, { name: 'SSN4', index: 'SSN4', width: 100 },
        { name: 'Department', index: 'Department', width: 80, align: "right" },
        { name: 'Age', index: 'Age', width: 80, align: "right" },
        { name: 'Salary', index: 'Salary', width: 80, align: "right" },
        { name: 'Address', index: 'Address', width: 150, sortable: false },
        { name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }], rowNum: 10,
        sortname: 'EmloyeeId',
        viewrecords: true,
        sortorder: "desc",
        caption: "List Employee Details",
        scrollOffset: 0
    });
            });
            //jQuery("#reportList").jqGrid({
            //    dattatype: "json",
            //    colNames: ["Name", "Public", "DataMart", "Category", "Created By", "Created Time", "Status", "Default Format"],
            //    colModel: [
            //        { name: "ReportName", index: "ReportName", width: 50 },
            //        { name: "Public", index: "Public", width: 20 },
            //        { name: "Datamart", index: "Datamart", width: 50 },
            //        { name: "Category", index: "Category", width: 50 },
            //        { name: "CreatedBy", index: "CraetedBy", width: 50 },
            //        { name: "CreatedTime", index: "CreatedTime", width: 50 },
            //        { name: "Status", index: "status", width: 50 },
            //        { name :"DefaultFormat",index:"DefaultFormat",width:50}
            //    ],
            //    rowNum: 10,
            //    rowList: [10, 20, 30],
            //    multiSelect: true,
            //    recordPos: "left",
            //    sortName: "ReportName",
            //    viewRecords: true,
            //    caption: "Report List",
            //    pager:"#reportListPager"
            //});
            //$("#reportList").jqGrid("navGrid", "#reportListPager", { add: false, del: false, edit: false, position: 'right' });
        </script>
        <style type="text/css">
            .header{ height: 3em; width:inherit; }
            .profileinfo{ font-size: 20px;
font-family: 'Segoe UI';
font-weight: 600;
float:left;
vertical-align: -webkit-baseline-middle;
margin: .5em;
}
            .navbutton{  
height: 3em;
width: 6em;
margin-top: .5em;
margin-right: 1em; 
float:right;
            }

            .ReportgridPanel
            {
                 border: 1px solid #aaaaaa;
                 height: 26em;
            }
            .searchButton{width: 100px; height: 30px; border-radius: 8px; float: right; margin-right: 70px; cursor:pointer; font-size:15px; font-family:'Segoe UI'; font-weight:500;}

            .searchcontrol
            {width: 23em;
margin-top: 1em;
float: right;
margin-right: 1em;
            }
        </style>
    </head>
    <body>
        <div id="ManinContent" style="border: 1px solid #aaaaaa;">
            <div id="Header" class="header">
                <label id="lb_ProfileInfo" class="profileinfo"> Welcome Admin...</label>
                <div class="navbutton">
                    <span>
                        <img src="~/Content/images/Datasource.png" title="Data Source" />
                    </span>
                    <span>
                       <img src="~/Content/images/list.png" title="Report Category" />
                    </span>
                    <span>
                        <img src="~/Content/images/security.png" title="Security" />
                    </span>
                </div>
            </div>
            <div id="gridPanel" class="ReportgridPanel">
                <div style="width:inherit;">
                <div class="searchcontrol">
                    <input type="text" title="search"  />
                    <button title="Search" class="searchButton">Search</button>
                </div>
                    </div>
                <table id="reportList">
                </table>
            </div>
        </div>
    </body>
</html>

Answer 1

我可以想到这个问题的 2 个潜在原因：

多次添加 jQgrid 脚本。因为你写了你提供的所有代码都是部分视图的一部分，如果你的布局或其他部分视图中也有 <script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> 这可能会导致这样的错误（我在错误地添加多个引用时遇到过类似的问题jQuery 脚本).
您渲染的结构错误 html。如果所有这些代码都是部分视图的一部分，并且您将其呈现在其他视图或布局中，您将拥有无效的 html 文档，因为它将包含多个 html、head 和 body 标签。一般来说，唯一应该包含这些标签的地方是布局视图：

<html>    
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>@ViewBag.Title - My ASP.NET Application</title>
      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/redmond/jquery-ui.css" />
      <link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
    </head>
    <body>
      <div class="container body-content">
         @RenderBody()
      </div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
      <script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
      <script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
      @RenderSection("scripts", required: false)
    </body>
</html>

如果您打算在多个视图中使用 jqgrid，您可以将它的脚本添加到布局中（但是您应该知道，添加到布局中的 scripts/content 越多，您的网站速度就越慢。它被认为是在初始页面加载时呈现最少数量的脚本以提高站点性能的良好做法）。如果您要将 jqgrid 脚本添加到 _Layout.cshtml，您的局部视图应该类似于：

<script type="text/javascript">
            $(document).ready(function () {
                $("#reportList").jqGrid(
    {
        url: '',
        datatype: "json",
        mtype: 'GET',
        colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department', 'Age', 'Salary', "Address", 'Marital Status'],
        colModel: [
        { name: 'EmloyeeId', index: 'EmloyeeId', width: 20, stype: 'text' },
        { name: 'FName', index: 'FName', width: 150 },
        { name: 'LName', index: 'LName', width: 150 }, { name: 'SSN4', index: 'SSN4', width: 100 },
        { name: 'Department', index: 'Department', width: 80, align: "right" },
        { name: 'Age', index: 'Age', width: 80, align: "right" },
        { name: 'Salary', index: 'Salary', width: 80, align: "right" },
        { name: 'Address', index: 'Address', width: 150, sortable: false },
        { name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }], rowNum: 10,
        sortname: 'EmloyeeId',
        viewrecords: true,
        sortorder: "desc",
        caption: "List Employee Details",
        scrollOffset: 0
    });
            })
</script>

<div id="ManinContent" style="border: 1px solid #aaaaaa;">
            <div id="Header" class="header">
                <label id="lb_ProfileInfo" class="profileinfo"> Welcome Admin...</label>
                <div class="navbutton">
                    <span>
                        <img src="~/Content/images/Datasource.png" title="Data Source" />
                    </span>
                    <span>
                       <img src="~/Content/images/list.png" title="Report Category" />
                    </span>
                    <span>
                        <img src="~/Content/images/security.png" title="Security" />
                    </span>
                </div>
            </div>
            <div id="gridPanel" class="ReportgridPanel">
                <div style="width:inherit;">
                <div class="searchcontrol">
                    <input type="text" title="search"  />
                    <button title="Search" class="searchButton">Search</button>
                </div>
                    </div>
                <table id="reportList">
                </table>
            </div>
        </div>

Answer 2

我遇到了类似的问题。问题出在 Layout.cshtml 部分视图中，其中有

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

体内。我把它移到 Layout.cshtml 的头部，它起作用了，网格出现了。

解决方案取自Unable to get jquery.jqgrid 4.4.1 working in ASP.NET MVC

Jqgrid 不呈现并且在调试时显示 Undefined is not a function 错误

Jqgrid not rendering and on Debugging it shows Undefined is not a function error

asp.net-mvc

jquery

jqgrid