jqgrid 的排序问题

Question

我想在jqgrid中实现可见行的排序，jqgrid的默认行为是对所有记录进行排序。我已经在服务器端处理了它，但问题是当我排序时，即使我在 page2 或其他页面上，我也总是将页面设为 1。下面是我的代码，我也尝试过

loadComplete

和

onPaging

方法。

 $(document).ready(function () {
        $("#grid").jqGrid({
            emptyrecords: "No records to view",
            ignoreCase: true,
            datatype: "json",
            url: '@Url.Action("LoadData", "Home")',
            mtype: "GET",
            height: 'auto',
            rowNum: 5,
            rowList: [5, 10, 15, 20],
            colNames: ['EmployeeId', 'EmployeeCity', 'EmployeeName'],
            colModel: [
            { name: 'EmployeeId', index: 'EmployeeId', key: true, width: 200, sorttype: 'int' },
            { name: 'EmployeeName', index: 'EmployeeName', width: 200, sorttype: 'text' },
            { name: 'EmployeeCity', index: 'EmployeeCity', width: 200, sorttype: 'text' }
            ],
            pager: '#pager',
            sortname: 'EmployeeId',
            viewrecords: true,
            sortorder: "asc",
            caption: "jqGrid Example"
        }).navGrid("#pager",
        { search: false, refresh: false, add: false, edit: false, del: false },
        {},
        {},
        {}
        );
    });

并且，我的服务器端代码是，

public ActionResult LoadData(int page, int rows, string sidx, string sord)
    {
        List<Employee> employeeList = new List<Employee>();
        for (int i = 1; i < 18; i++)
        {
            employeeList.Add(
        new Employee() { EmployeeId = i, EmployeeCity = "Mumbai_" + i, EmployeeName = "Jason_" + i }
        );
        }
        var totalRecords = 0;
        var totalPages = 0;
        var griddata = new List<Employee>();
        if (employeeList != null)
        {
            griddata = employeeList.Skip((page - 1) * rows).Take(rows).ToList();
            switch (sidx.ToLower())
            {
                case "employeeid":
                    if (sord.ToLower() == "asc")
                        griddata.OrderBy(x => x.EmployeeId).ToList();
                    else
                        griddata.OrderByDescending(x => x.EmployeeId).ToList();
                    break;
                default:
                    griddata.OrderByDescending(x => x.EmployeeName).ToList();
                    break;
            }
            totalRecords = employeeList.Count;
            totalPages = (int)Math.Ceiling((double)totalRecords / (double)rows);
        }
        var employeeListData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = griddata,
        };
        return Json(employeeListData, JsonRequestBehavior.AllowGet);
    }

Answer 1

在获得分页后，您将在服务器端对数据进行排序。我的意思是这一部分：

griddata = employeeList.Skip((page - 1) * rows).Take(rows).ToList();
switch (sidx.ToLower())
{
    case "employeeid":
        if (sord.ToLower() == "asc")
            griddata.OrderBy(x => x.EmployeeId).ToList();
        else
            griddata.OrderByDescending(x => x.EmployeeId).ToList();
        break;
    default:
        griddata.OrderByDescending(x => x.EmployeeName).ToList();
        break;
}

只需更改顺序即可：

switch (sidx.ToLower())
{
    case "employeeid":
        if (sord.ToLower() == "asc")
           employeeList = employeeList.OrderBy(x => x.EmployeeId).ToList();
        else
           employeeList = employeeList.OrderByDescending(x => x.EmployeeId).ToList();
        break;
    default:
           employeeList = employeeList.OrderByDescending(x => x.EmployeeName).ToList();
        break;
}
griddata = employeeList.Skip((page - 1) * rows).Take(rows).ToList();

Answer 2

是的，终于以简单的方式完成了。 添加了 1 个隐藏字段。

<input type="hidden" id="exampleGrid" value="" />

将 jqgrid 修改为

$(document).ready(function () {
        $("#grid").jqGrid({
            emptyrecords: "No records to view",
            ignoreCase: true,
            datatype: "json",
            url: '@Url.Action("LoadData", "Home")',
            mtype: "GET",
            height: 'auto',
            rowNum: 5,
            rowList: [5, 10, 15, 20],
            colNames: ['EmployeeId', 'EmployeeName', 'EmployeeCity'],
            colModel: [
            { name: 'EmployeeId', index: 'EmployeeId', key: true, width: 200, sorttype: 'int' },
            { name: 'EmployeeName', index: 'EmployeeName', width: 200, sorttype: 'text' },
            { name: 'EmployeeCity', index: 'EmployeeCity', width: 200, sorttype: 'text' }
            ],
            pager: '#pager',
            sortname: 'EmployeeId',
            viewrecords: true,
            loadComplete: function () {
                var page = $('#grid').jqGrid('getGridParam', 'page');
                $("#exampleGrid").val(page);
            },
            onSortCol: function (index, iCol, sortOrder) {
                $('#grid').jqGrid('setGridParam', {
                    page: $("#exampleGrid").val()
                });
            },
            sortorder: "asc",
            caption: "jqGrid Example"
        }).navGrid("#pager",
        { search: false, refresh: false, add: false, edit: false, del: false },
        {},
        {},
        {}
        );
    });