jquery - 分页在带有 MVC 的 JqGrid 中不起作用

Question

Javascript代码:

  $(document).ready(function () {
        $("#myGrid").jqGrid({
            url: '@Url.Action("GetGridData")',
            datatype: 'json',
            myType: 'GET',
            colNames: ['CustomerName', 'CustomerPersonContactNo', 'Sector', 'StatusofEnquiry'],
            colModel: [
                    { name: 'CustomerName', index: 'CustomerName' },
                    { name: 'CustomerPersonContactNo', index: 'CustomerPersonContactNo' },
                    { name: 'Sector', index: 'Sector' },
                    { name: 'StatusofEnquiry', index: 'StatusofEnquiry' }
                ],
            jsonReader: {
                total: "total",
                page: "page",
                records: "records",
                root: "rows",
                repeatitems: false,
                id: "0"
            },
            pager: "#myPager",
            rowNum: 5,
            rowList: [5, 10, 20, 30],
            //sortname: 'customerName',
          //  sortorder: "desc",
            viewrecords: true,
            caption: "Enquiry Details",
            pagerpos: 'center'
        });

        $('#btnSubmit').click(function () {
            SubmitEnquiryDetails();
        });

    });

这是 Controller 方法

  public JsonResult GetGridData(jqGridViewModel objJqGridParameters)
    {
        var enquiryDetails = objEMS.EnquiryDetails;
        var count = enquiryDetails.Count();
        int pageIndex = objJqGridParameters.page;
        int pageSize = objJqGridParameters.rows;
        int startRow = (pageIndex * pageSize) + 1;
        int totalRecords = count;
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

        var JsonData = new
        {
            total =  totalPages.ToString(),
            page = pageIndex.ToString(),
            records = count.ToString(),
            rows = enquiryDetails.Select(x => new
            {
                x.CustomerName,
                x.CustomerPersonContactNo,
                x.Sector,
                x.StatusofEnquiry
            }).ToArray()
        };
        return Json(JsonData, JsonRequestBehavior.AllowGet);
    }

我的网格有 21 条记录，在页面加载时，根据我的代码，我可以看到 5 条记录。 但如果我导航到第二页，记录不会改变原样。

任何帮助将不胜感激。

Answer 1

我强烈建议您使用loadonce: true如果您需要显示的项目总数不多(少于 1000 或 10000)，则可以使用此方案。您写道您目前只有 21 条记录。因此loadonce: true绝对应该是您的选择。它简化了服务器的代码，并使分页从用户的角度更快地工作。 Action方法的代码可以是

public JsonResult GetGridData() {
    return Json(objEMS.EnquiryDetails.Select(x => new
        {
            x.CustomerId,
            x.CustomerName,
            x.CustomerPersonContactNo,
            x.Sector,
            x.StatusofEnquiry
        }).ToArray(),
        JsonRequestBehavior.AllowGet);
}

或

public JsonResult GetGridData() {
    return Json(objEMS.EnquiryDetails.ToArray(), JsonRequestBehavior.AllowGet);
}

第二句话。强烈建议在返回的数据中包含数据库中的 native ID。例如，您有 x.Id或x.CustomerId属性，您应该将其包含在从 GetGridData() 返回的属性集中.

下一个问题。从url返回的数据应排序对应于 sortname和sortorder参数，您现在对其进行了注释，因为您的服务器代码未处理 sidx和sord将 jqGrid 发送到 url 的参数。我建议您使用 free jqGrid 的当前版本 (4.12.1) ，支持附加选项 forceClientSorting: true这会强制在客户端对数据进行排序。因此，您不需要在 GetGridData() 内执行此操作行动。免费 jqGrid - 它是 jqGrid 的分支，我在将主分支重命名为 Guriddo jqGrid JS(请参阅 the post )、更改许可协议(protocol)并将其商业化(请参阅 here 价格)后开发。

您可以将 JavaScript 更改为以下内容

$(document).ready(function () {
    $("#myGrid").jqGrid({
        url: '@Url.Action("GetGridData")',
        datatype: 'json',
        colModel: [
            { name: 'CustomerName' },
            { name: 'CustomerPersonContactNo' },
            { name: 'Sector' },
            { name: 'StatusofEnquiry' }
        ],
        jsonReader: {
            id: "CustomerId" // or id: "Id" depend on the name of ID
        },
        loadonce: true,
        forceClientSorting: true,
        pager: true,
        rowNum: 5,
        rowList: [5, 10, 20, "1000:All"],
        sortname: "customerName",
        sortorder: "desc",
        viewrecords: true,
        caption: "Enquiry Details"
    });

    $('#btnSubmit').click(function () {
        SubmitEnquiryDetails();
    });

});

id: "CustomerId" jsonReader的属性(property)应该通知 jqGrid 有关包含输入数据的唯一值的属性的名称。 jqGrid将分配值id每行的属性(每个 id 元素的 <tr>)基于属性的值。如果属性名称 if id ，然后您可以删除 jsonReader: { id: "id" }从选项中，因为它已经是默认值。

选项pager: true演示了免费 jqGrid 的另一个功能(请参阅 the wiki article )。您不需要创建一个空的 <div id="myPager"></div>并使用 pager: "#myPager" 。相反，您可以使用 pager: true免费的 jqGrid 将为您创建具有唯一 id 属性的潜水。您可以跳过 pager其他方法中的参数并使用 $("#myGrid").jqGrid("navGrid", { add: false, ...});而不是$("#myGrid").jqGrid("navGrid", "#myPager", { add: false, ...}); 。免费的jqGrid只会使用网格的分页器。

如果你使用免费的jqGrid，那么建议包含Font Awesome的CSS :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

并添加选项 iconSet: "fontAwesome"到网格。免费 jqGrid 的其他一些有用选项是

cmTemplate: { autoResizable: true },
autoResizing: { compact: true }

允许根据列内容的最大宽度设置列的宽度(请参阅 the wiki )。用户只需双击缩放器(两列之间的列标题区域)。

好的做法是从 CDN(免费的 jqGrid、jQuery、jQuery UI 等)加载常见的 CSS 和 JS 文件。文件在 CDN 上发布一次，所使用的 URL 下永远不会更改。由于文件的缓存时间很长，并且网络浏览器通常会从本地网络浏览器缓存加载文件，而不是从服务器加载。甚至从 CDN 加载也非常快。请参阅the documentation 。典型<head>页面的一部分如下所示

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Your page title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.0/css/ui.jqgrid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.0/js/jquery.jqgrid.min.js"></script>