无法将数据从数据库加载到 Jquery Grid答案

【问题标题】：Can't load data from database to a Jquery Grid无法将数据从数据库加载到 Jquery Grid
【发布时间】：2014-01-07 07:47:27
【问题描述】：

我面临的问题是我无法从数据库中填充 Jqgrid，它只显示 Json 格式的数据。

查看 (ListarDistritos)

@model IEnumerable<Entidades.Base.ENDistrito>

<script src="@Url.Content("~/Scripts/Base/modGrid.js")"></script>
<script src="@Url.Content("~/Content/JqueryGrid/jquery-1.9.0.min.js")"></script>
<link href="@Url.Content("~/Content/JqueryGrid/jquery-ui-1.9.2.custom.css")" rel="stylesheet" />
<script src="@Url.Content("~/Content/JqueryGrid/jquery.jqGrid.js")"></script>
<link href="@Url.Content("~/Content/JqueryGrid/ui.jqgrid.css")" rel="stylesheet" />
<script src="@Url.Content("~/Content/JqueryGrid/grid.locale-en.js")"></script>

<link href="@Url.Content("~/Content/estilo.css")" rel="stylesheet" />

<h2>@ViewBag.Message</h2>
<table id="grid">
 </table>
<div id="pager"></div>

ModGrid.JS

var lastsel;
$(document).ready(function()  {
    $("#grid").jqGrid({
        url: '/MantDistritos/ListarDistritos',
        datatype: "json",
        mtype: 'GET',
        colNames: ['Id', 'Descripcion'],
        colModel: [
                        {
                            name: 'IdDistrito', index: 'IdDistrito', sortable: false, align: 'left', width: '200',
                            editable: true, edittype: 'text'
                        },
                        {
                            name: 'DescripcionDistrito', index: 'DescripcionDistrito', sortable: false, align: 'left', width: '200',
                            editable: true, edittype: 'text'
                        }
        ],
        jsonReader: {
            repeatitems: false,
            id: "0"
        },
        pager: jQuery('#pager'),
        sortname: 'DescripcionDistrito',
        rowNum: 10,
        rowList: [10, 20, 25],
        sortorder: "",
        height: 125,
        viewrecords: true,
        rownumbers: true,
        caption: 'Distritos',
        width: 750,
        editurl: "/Home/PerformCRUDAction",  
        onCellSelect: function (rowid, iCol, aData) {


            if (rowid && rowid !== lastsel) {

                if (lastsel)
                    jQuery('#grid').jqGrid('restoreRow', lastsel);
                jQuery('#grid').jqGrid('editRow', rowid, true);
                lastsel = rowid;
            }
        }
    })
    jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: true, del: true, search: false, refresh: true },
            { closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300 },
            { closeOnEscape: true, reloadAfterSubmit: true, closeAfterAdd: true, left: 450, top: 300, width: 520 },
            { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });

});

控制器(MantDistritos) 公共类 MantDistritosController : 控制器 { 公共 JsonResult ListarDistritos() { ViewBag.Message = Resources.Language.Title_Page_MTD_L; var distrito = new LNClientes().DistritoListar(); 返回 Json(distrito,JsonRequestBehavior.AllowGet); } }

当我执行应用程序时，它会显示这个

[{"IdDistrito":1,"DescripcionDistrito":"MAGDALENA DEL MAR"},{"IdDistrito":2,"DescripcionDistrito":"JESUS MARIA"},{"IdDistrito":3,"DescripcionDistrito":"PUEBLO LIBRE"},{"IdDistrito":4,"DescripcionDistrito":"LIMA 36"},{"IdDistrito":5,"DescripcionDistrito":"BARRANCO"},{"IdDistrito":6,"DescripcionDistrito":"MIRAFLORES"},{"IdDistrito":7,"DescripcionDistrito":"SAN ISIDRO"},{"IdDistrito":8,"DescripcionDistrito":"SAN JUAN DE LURIGANCHO"},{"IdDistrito":9,"DescripcionDistrito":"SAN JUAN DE MIRAFLORES"},{"IdDistrito":10,"DescripcionDistrito":"LOS OLIVOS"},{"IdDistrito":11,"DescripcionDistrito":"COMAS"},{"IdDistrito":12,"DescripcionDistrito":"SURCO"}]

但它没有显示 Jquery 网格内的任何数据。如果我使用 ActionResult 而不是 JsonResult 它会显示 Jquery 网格但没有数据。

任何解决我的问题的线索将不胜感激

谢谢。

【问题讨论】：

标签： asp.net-mvc-4 jqgrid

【解决方案1】：

您的 json 数据似乎没问题。我没有发现错误。您的 jsonReader 中似乎有错误。 ID 是列的名称。它应该是

jsonReader : {
  root:"data", // Here your posted json data   
  page: "currpage", // shows current page 
  total: "totalpages", // total pages 
  records: "totalrecords" // total records

这个网址可以帮助您更好地理解。 JsonReader wiki

如果你不想关心页面和总数，你可以简单地

jsonReader : {
  root:"data", 
  page:  function(obj) { return 1; }, // page as 1
  total: function(obj) { return 1; }, // total  as 1
  records: function(obj) { return reponse.length;},

【讨论】：