在 MVC 中加载 jqGrid

Posted 2023-03-27

【中文标题】在 MVC 中加载 jqGrid

【英文标题】：jqGrid load in MVC

【发布时间】：2013-05-31 10:45:47

【问题描述】：

我是 jqgrid 的新手。我尝试在我的 mvc 项目中使用 jqgrid。我正在使用以下代码将数据映射到网格。但它不起作用。 GetJqGridData 函数首先加载到我的 MVC 项目中。

下面是控制器的代码。

public ActionResult GetJqGridData()
    
        var jqGridData = new JqGridObject()
        
            Data = GetSomeSampleData(),
            Page = "1",
            PageSize = 3, // u can change this !  
            SortColumn = "1",
            SortOrder = "asc"
        ;

        return Json(jqGridData, JsonRequestBehavior.AllowGet);
    

下面是 VIEW 的代码。

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />  
<link href="../../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />  
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>  
<script src="../../Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>  
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>  
<script type="text/javascript">
    $(document).ready(function () 
        $("#myGrid").jqGrid(
            url: '@Url.Action("GetJqGridData")',
            datatype: 'json',
            myType: 'POST',
            colNames: ['Id', 'Name'],
            colModel: [
 name: 'Id', index: 'Id' ,
 name: 'Name', index: 'Name' 
],
            jsonReader: 
                root: 'Data',
                id: 'id',
                repeatitems: false
            ,
            pager: $('#myPager'),
            rowNum: 5,
            rowList: [2, 5, 10],
            width: 600,
            viewrecords: true,
            caption: 'Jqgrid MVC Tutorial'
        );
    );  
</script>

<table id="myGrid"></table>  
<div id="myPager"></div>  

这是我得到的结果

谢谢 线轴

【参考方案1】：

尝试使用以下 json 格式：

 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    "id" :"1", "cell" :["cell11", "cell12", "cell13"],
    "id" :"2", "cell":["cell21", "cell22", "cell23"],
      ...
  ]

有关格式的更多信息，请查看此链接：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data