在 MVC 中使用 jqGrid 滚动时自动加载数据

Question

我的问题是，在尝试实现自动加载功能的使用时，我根本无法让它向我的操作发出 GET 请求以尝试加载下一组数据。 第一次初始加载工作正常

我试着按照这里的例子http://trirand.com/blog/jqgrid/jqgrid.html

该功能列在左侧标题为 3.4 版中的新功能 - 滚动时自动加载的项目下

这里有什么错误？

这是我的 js 网格代码

<script type='text/javascript'>
$(document).ready(function()
{
   $('#gvEmps').jqGrid(
   {
      url:'RecordEmpGrid',
      datatype: 'json',
      colNames:['Select Training(s)'],
      colModel :
      [
         {name: 'Select Training(s)', index: 'TrainingName', width: '300', align: 'Left'}
      ],
   rowNum: 15,
   scroll: true,
   rowList:[10,20,30],
   pager: '#gvEmpsPager',
   sortname: 'TrainingName',
   viewrecords: true,
   sortorder: 'desc',
   jsonReader:
   {
      repeatitems : true,
   },
   caption: ''
});
});
</script>

HTML

<table id="gvEmps" class="SGrid scroll"></table>
<div id="gvEmpsPager" class="scroll"></div>

控制器

    //will never hit this action when scrolling, only first time on page load
    [HttpGet]
    public ActionResult RecordEmpGrid(string sidx, string sord, int page, int rows)
    {
        var gr = new GridResult(sidx, sord, page, rows);
        var skip = rows * page - rows;
        DataTable dt = null;
        using (var mr = new MultipleRecords(Product.Utility, "evaluateSql"))
        {
            mr["sql"] = "SELECT * FROM TT.Training WHERE CompanyId = 190 ORDER BY TrainingName ASC";
            dt = mr.GetDataTable();
        }
        gr.Total = dt.Rows.Count;
        var records = new MultipleRecords(dt);
        foreach (var row in records.Skip(skip).Take(rows))
        {
            gr.AddDataRow(new []{row["TrainingTypeID"].String, row["TrainingName"].String });
        }
        return Json(gr.Data, JsonRequestBehavior.AllowGet);
    }

我的 json 包装对象

public class GridResult
{
    private List<object> m_rowData = new List<object>();

    private string m_order;
    private string m_idx;
    private int m_rows;
    private int m_page;

    public int Total { get; set; }

    public GridResult()
    {

    }

    public GridResult(string sidx, string sord, int page, int rows)
    {
        m_idx = sidx;
        m_order = sord;
        m_page = page;
        m_rows = rows;
    }

    public void AddDataRow(object[] columnData)
    {
        m_rowData.Add(columnData);
    }

    private object m_data;
    public object Data
    {
        get
        {
            return m_data ?? (m_data = BuildData());
        }
    }

    protected object BuildData()
    {
        var id = 1;
        return new
        {
            total = Total,
            page = m_page++,
            records = m_rows,
            rows = (from row in m_rowData
                    select new
                    {
                        id = id++,
                        cell = row
                    }
                    ).ToArray()
        };
    }
}

Answer 1

问题出在我的 json 辅助对象中。我将此归咎于糟糕的命名约定，但似乎我将记录和总参数混合在一起。

total = //Number of records of the page
records = //Total number of records that can be loaded


protected object BuildData()
{
    var id = 1;
    return new
    {
        total = _rows, // <-- Number of rows total for a page limit (15 in my case)
        page = m_page++,
        records = Total, //<-- Total number of records possible to load (121 in my case)
        rows = (from row in m_rowData
                select new
                {
                    id = id++,
                    cell = row
                }
                ).ToArray()
    };
}

切换这两个解决了问题。

这是一个很好的链接，可以引导我进行发现。这家伙是 jqGrid 大师。

http://blogs.teamb.com/craigstuntz/2009/04/15/38212/

Answer 2

这是我为您编写的完整工作示例，其中我对值进行了硬编码，但您可以轻松地对其进行调整以满足您的需求。

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult RecordEmpGrid(string sidx, string sord, int page, int rows)
    {
        var gr = new GridResult(sidx, sord, page, rows);
        var skip = rows * page - rows;
        gr.Total = 75;
        foreach (var item in Enumerable.Range(1, gr.Total).Skip((page - 1) * rows).Take(rows))
        {
            gr.AddDataRow(new[] { string.Format("TrainingName: {0}", item) });
        }
        return Json(gr.Data, JsonRequestBehavior.AllowGet);
    }
}

查看：

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table {
            border: solid 1px #e8eef4;
        }
    </style>
    <link href="@Url.Content("~/scripts/jqgrid/css/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/scripts/jqgrid/js/i18n/grid.locale-en.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/scripts/jqgrid/js/jquery.jqGrid.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#gvEmps').jqGrid({
                url: '@Url.Action("RecordEmpGrid")',
                datatype: 'json',
                colNames: ['Select Training(s)'],
                colModel: [
                    { name: 'Select Training(s)', index: 'TrainingName', width: '300', align: 'Left' }
                ],
                rowNum: 10,
                scroll: true,
                rowList: [10, 20, 30],
                pager: '#gvEmpsPager',
                sortname: 'TrainingName',
                viewrecords: true,
                sortorder: 'desc',
                jsonReader: {
                    repeatitems: true
                },
                caption: '',
                height: 100
            });
        });
    </script>
</head>
<body>
    <table id="gvEmps"></table>
    <div id="gvEmpsPager"></div>
</body>
</html>

Answer 3

您在 ajax 调用中缺少控制器名称 (url:'/controllername/actionname') 希望能解决你的问题。