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

Posted 2023-05-08

【中文标题】无法将数据从数据库加载到 Jquery Grid

【英文标题】：Can't load data from database to a 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 网格但没有数据。

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

谢谢。

【参考方案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;,  

,