JqGrid 不工作

Question

我在 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.Any 帮助将不胜感激。

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

第二种方式

您可以使用不同的绑定初始化 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,
        }
});

然后你可以将这个 class 传递给 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 定义中的字段匹配 。

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

JqGrid 不工作

JqGrid Does not Work

jquery

asp.net-mvc

asp.net-mvc-4

jqgrid

第一种方式

第二种方式

JqG​​rid 不工作

JqGrid Does not Work

jquery

asp.net-mvc

asp.net-mvc-4

jqgrid

第一种方式

第二种方式

JqGrid 不工作