2011-09-02 85 views
1

我的问题是,在试图实现自动载入功能的使用时,我无法让GET请求对我的操作尝试加载下一组数据。滚动在MVC中使用jqGrid滚动时自动载入数据

是什么时候自动加载 - 第一个初始负载正常工作

我尝试以下这里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() 
     }; 
    } 
} 

回答

1

问题出在我的json帮手对象中。我责怪这个不好的命名约定,但看起来我正在混合记录&总参数。

切换这两个问题解决了这个问题。

这是一个很好的链接,引导我发现。这个人是一个jqGrid大师。

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

0

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

+0

抱歉,我忘了提,但我只是用一些自定义的路由,让我在这个特殊的情况下离开控制器的名字。请记住,它加载第一组记录的罚款,它只是在滚动期间的自动加载完全失败。 –

+0

你有没有视图名称作为RecordEmpGrid? – solkim

+0

不,视图的名称是Record.cshtml –

1

这里是一个完整的工作示例我为你写了,我已经硬编码的值,但你可以修改它很容易满足您的需求。

控制器:

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>