Question

我正在尝试在我的项目中添加JQgrid，当我尝试使用简单的HTML页面进行演示时，它会显示网格但是当我在局部视图中向MVC应用程序添加相同的代码时，网格不会呈现。当我调试时，它显示jqGrid（）为undefined。这是我的代码......

<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

我可以考虑这个问题的两个潜在原因：

多次添加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，你可以将它的脚本添加到布局中（但是你应该知道你添加到布局的脚本/内容越多，你的网站就越慢。它被认为是在初始页面加载时呈现最少量脚本的良好实践可提高站点的性能。如果要将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不是函数错误

2 个答案: