JqG​​rid不起作用

时间:2015-02-09 07:12:14

标签: 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" 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的帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

你应该明白,如果你想用数据填充 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只是string arraylist_Model字段的$.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, } });

第二种方式

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

然后你应该像这样更改 JQgrid 默认值:

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); 中使用它,如下所示:

{{1}}

但是你应该记住,你的类中的字段名称应该匹配Jqgrid定义中的字段

答案 1 :(得分:0)

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