Jquery JqGrid不工作_Jquery_Asp.net Mvc_Asp.net Mvc 4_Jqgrid

Jquery JqGrid不工作

jquery asp.net-mvc asp.net-mvc-4 jqgrid

Jquery JqGrid不工作,jquery,asp.net-mvc,asp.net-mvc-4,jqgrid,Jquery,Asp.net Mvc,Asp.net Mvc 4,Jqgrid,我在Asp.net mvc4中工作，我试图在其中包含jqgrid，但当我运行该程序时，它不会显示任何内容，请帮助我解决此问题查看 @{ ViewBag.Title = "Index"; } <head> <link rel="stylesheet" href="../../css/RGStyle.css" type="text/css" /> <link rel="stylesheet" href="../../Styles/ui.jqgrid.css

我在Asp.net mvc4中工作，我试图在其中包含jqgrid，但当我运行该程序时，它不会显示任何内容，请帮助我解决此问题

查看

@{
    ViewBag.Title = "Index";
}


<head>
<link rel="stylesheet" href="../../css/RGStyle.css" type="text/css" />
<link rel="stylesheet" href="../../Styles/ui.jqgrid.css" type="text/css" />
<script type="text/javascript" src="../../Script/JQGrid/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../../Script/JQGrid/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="../../Script/JQGrid/grid.locale-en.js"></script>
    <link href="../../Styles/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
    <h>list Details</h>
</head>
<body>



 <table id="tblJQGrid">
                </table>


 <script type="text/javascript">
     $(document).ready(function () {
         $("#tblJQGrid").jqGrid({
             url: 'list/Getlist_Details',
             datatype: "json",
             mtype: 'GET',
             colNames: ['Period', 'Year', 'Entity', 'SubmitStatus', 'SubmittedOn'],
             colModel: [
                { name: 'Period', index: 'Period', width: 20, stype: 'text' },
                { name: 'Year', index: 'Year', width: 150 },
                { name: 'Entity', index: 'Entity', width: 150 },
                { name: 'SubmitStatus', index: 'SubmitStatus', width: 100 },
                { name: 'SubmittedOn', index: 'SubmittedOn', width: 80, align: "right" },
                 ],
             rowNum: 10,
            viewrecords: true,
            caption: "CheckList  Details",
             scrollOffset: 0
         });
     });
    </script>
    </body>

当我只运行程序时，我会得到页面的标题。我没有得到任何jqgrid。任何帮助都将不胜感激。

您应该了解，如果您想用数据填充JQrid，您应该将特定的

Json

集合传递给它。有两种方法可以做到这一点

第一条路如果使用默认JQgrid设置，则可以将此集合传递给

Json（）

控制器

方法：

  public class Row
    {
        public string id { get; set; }
        public List<string> cell { get; set; }

        public Row()
        {
            cell = new List<string>();
        }
    }

    public class JqgridData
    {
        public int page { get; set; }
        public int total { get; set; }
        public int records { get; set; }
        public List<Row> rows { get; set; }

        public JqgridData()
        {
            rows = new List<Row>();
        }
    }

 public class Set<T>
    {
        public Set(List<T> elements, int rowsOnPage, int pageSelected, int rowsAll)
        {
            Elements = elements;
            PageSelected = pageSelected;
            RowsOnPage = rowsOnPage;
            RowsAll = rowsAll;
            PagesAll = (rowsAll % RowsOnPage == 0) 
            ? rowsAll / RowsOnPage 
            : rowsAll / RowsOnPage + 1; ;
        }
        public int RowsOnPage { get; set; }
        public List<T> Elements { get; set; }
        public int? RowsAll { get; set; }
        public int PageSelected { get; set; }
        public int PagesAll { get; set; }
    }

然后您可以将该类传递给

Json（）

Controller

方法：

  public class Row
    {
        public string id { get; set; }
        public List<string> cell { get; set; }

        public Row()
        {
            cell = new List<string>();
        }
    }

    public class JqgridData
    {
        public int page { get; set; }
        public int total { get; set; }
        public int records { get; set; }
        public List<Row> rows { get; set; }

        public JqgridData()
        {
            rows = new List<Row>();
        }
    }

 public class Set<T>
    {
        public Set(List<T> elements, int rowsOnPage, int pageSelected, int rowsAll)
        {
            Elements = elements;
            PageSelected = pageSelected;
            RowsOnPage = rowsOnPage;
            RowsAll = rowsAll;
            PagesAll = (rowsAll % RowsOnPage == 0) 
            ? rowsAll / RowsOnPage 
            : rowsAll / RowsOnPage + 1; ;
        }
        public int RowsOnPage { get; set; }
        public List<T> Elements { get; set; }
        public int? RowsAll { get; set; }
        public int PageSelected { get; set; }
        public int PagesAll { get; set; }
    }

但是您应该记住，类中的字段名应该与Jqgrid定义中的字段匹配

最后我找到了答案问题出在document.ready函数中，当我删除它时，它可以正常工作

     $("#tblJQGrid").jqGrid({
         url: 'list/Getlist_Details',
         datatype: "json",
         mtype: 'GET',
         colNames: ['Period', 'Year', 'Entity', 'SubmitStatus', 'SubmittedOn'],
         colModel: [
            { name: 'Period', index: 'Period', width: 20, stype: 'text' },
            { name: 'Year', index: 'Year', width: 150 },
            { name: 'Entity', index: 'Entity', width: 150 },
            { name: 'SubmitStatus', index: 'SubmitStatus', width: 100 },
            { name: 'SubmittedOn', index: 'SubmittedOn', width: 80, align: "right" },
             ],
         rowNum: 10,
        viewrecords: true,
        caption: "CheckList  Details",
         scrollOffset: 0
     });

您是否正在点击

Getlist\u Details（）

方法？感谢您提供的有效信息，问题是我的服务器端函数从未点击过，在我的客户端，我试图调用一个url为的函数：“list/Getlist\u Details”，此url为服务器端的函数从未调用过。请帮我解决那个问题，检查firebug或类似brouser中f12的东西，检查网络，那里发生了什么？什么样的错误会返回您的请求？没有错误，但我没有获得网格视图，我现在可以用任何方法解决它。问题在document.ready函数中，当我删除它时，它将正常工作。通常，应该将代码放置在

中，并在代码上方使用

document.ready

。如果您在

中混合使用脚本和HTML片段，您当然不希望在JavaScript代码中准备好父元素。因此

document.ready

在HTML文件的

中非常有用，但不应在直接插入

的脚本中使用。

 return Json(new Set<list_Model>(checklistsend, 
 checklistsend.Count(),
 1,    
 checklistsend.Count()),
 JsonRequestBehavior.AllowGet);

     $("#tblJQGrid").jqGrid({
         url: 'list/Getlist_Details',
         datatype: "json",
         mtype: 'GET',
         colNames: ['Period', 'Year', 'Entity', 'SubmitStatus', 'SubmittedOn'],
         colModel: [
            { name: 'Period', index: 'Period', width: 20, stype: 'text' },
            { name: 'Year', index: 'Year', width: 150 },
            { name: 'Entity', index: 'Entity', width: 150 },
            { name: 'SubmitStatus', index: 'SubmitStatus', width: 100 },
            { name: 'SubmittedOn', index: 'SubmittedOn', width: 80, align: "right" },
             ],
         rowNum: 10,
        viewrecords: true,
        caption: "CheckList  Details",
         scrollOffset: 0
     });