JqGrid 不工作答案

【问题标题】：JqGrid Does not WorkJqGrid 不工作
【发布时间】：2015-02-09 07:12:14
【问题描述】：

我正在使用 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>

控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using X.Y.Controllers;
using X.Y;

namespace X.Y.Controllers
{
    public class listController : Controller
    {
        //
        // GET: /DelegateChecklist/
        Common com = new Common();
        CheckListAssign ck = new CheckListAssign();
        public listController()
        {
            com.Load_Labels();


        }

        public ActionResult CMS_Checklist()
        {
            return View();
        }

        public JsonResult Getlist_Details()
        {
            List<X.Models.list_Model> checklistsend = new List<Models.list_Model>();
            checklistsend.Add(new X.Models.list_Model()
            {
                Period="Feb",
                Year="2010",
                Entity="ABC",
                SubmitStatus="null",
                SubmittedOn="2014"


            });

            checklistsend.Add(new X.Models.list_Model()
            {
                Period = "Mar",
                Year = "2010",
                Entity = "ABC",
                SubmitStatus = "null",
                SubmittedOn = "2014"


            });
            checklistsend.Add(new X.Models.list_Model()
            {
                Period = "Apr",
                Year = "2010",
                Entity = "ABC",
                SubmitStatus = "null",
                SubmittedOn = "2014"


            });

            var checklistReturn = Json(checklistsend, JsonRequestBehavior.AllowGet );
            return checklistReturn;
        }


    }
}

模态

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace X.Y.Models
{
    public class list_Model
    {
        public string Period { get; set; }
        public string Year { get; set; }
        public string Entity { get; set; }
        public string SubmitStatus {get;set;}
        public string SubmittedOn { get; set; }
    }
}

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

【问题讨论】：

你还在使用Getlist_Details() 方法吗？

标签： jquery asp.net-mvc asp.net-mvc-4 jqgrid

【解决方案1】：

您应该明白，如果您想用数据填充 JQrid，您应该将特定的 Json 集合传递给它。有两种方法可以做到这一点。

第一道

如果您使用默认 JQgrid 设置，您可以将此集合传递给 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>();
        }
    }

其中cell 只是您的list_Model 字段中的string array。

第二种方式

您可以使用不同的 Bindings 初始化 JQgrid 并使其填充您的集合数据。

那么你应该像这样改变 JQgrid 默认值：

$.extend(jQuery.jgrid.defaults, {
    jsonReader: {
        root: "Elements",
        page: "PageSelected",
        total: "PagesAll",
        records: "RowsAll",
        repeatitems: false,
        id: "Id"
    },
    prmNames:
        {
            sort: "SortField",
            page: "SelectedPage",
            rows: "RowsOnPage",
            order: "SortDirection",
            search: "Search",
            nd: null,
        }
});

然后你可以将这个类传递给Json()Controller方法：

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

您可以像这样在Controller 中使用它：

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

但您应该记住，您的 Class 中的字段名称应该与您的 Jqgrid 定义中的字段匹配。

【讨论】：

感谢您的有效信息，问题是我的服务器端函数永远不会命中，在我的客户端我试图用 url 调用一个函数：'list/Getlist_Details'，这个 url 但函数在服务器端从未调用过。请帮我解决这个问题
在brouser中检查firebug或类似的f12并检查网络，那里发生了什么？什么样的错误返回您的请求？
没有错误，但我没有得到网格视图，现在我已经解决了任何方法，问题出在 document.ready 函数中，当我删除它时它会正常工作..跨度>

【解决方案2】：

我终于找到了答案问题出在 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
     });

【讨论】：

通常应该将代码放在<head> 中并在代码上使用document.ready。如果您在<body> 中混合使用脚本和 HTML 片段，您当然不希望在 JavaScript 代码中准备好父元素。所以document.ready在<head>的HTML文件中非常有用，但不应该在直接插入<body>的脚本中使用。