JqGrid 每次都加载 on Next 点击分页

Question

我在单击按钮时在 JqGrid 中绑定数据并成功完成。但是当我点击下一个分页时，数据绑定函数再次调用并显示相同的页面，即 1。不移动到第二页。请帮我解决这个问题。

 function SearchEmployee() {
    alert('Button Clicked'); 
    $('#grid').jqGrid({
        datatype: function (postdata) {
            var empId = $("#EmployeeId").val();
            var firstName = $("#F_Name").val();
            var lastName = $("#L_Name").val();

            var EmployeeDetailsModel = {
                EmployeeId: empId,
                F_Name: firstName,
                L_Name: lastName
            };
            $.ajax({
                url: "/Common/EmployeeSearchData/",
                type: 'POST',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ objEmpModel: EmployeeDetailsModel }),
                error: function (data, textStatus) {
                    alert('Error loading json');
                },
                success: function (jsondata, st) {
                    if (st == 'success') {
                        //alert('success');
                        alert(JSON.stringify(jsondata));
                        var thegrid = jQuery("#grid")[0];
                        var data = JSON.stringify(jsondata);
                        thegrid.addJSONData(JSON.parse(data));
                    }
                }
            });
        },
        colNames: ['HR ID', 'Employee Id', 'Full Name', 'Designation', 'Location Code'],
        colModel: [
            { key: true, hidden: true, name: 'HRId', index: 'HRId', editable: false },
            { key: false, name: 'EmployeeId', index: 'EmployeeId', editable: false, width: 100 },
            { key: false, name: 'FullName', index: 'FullName', editable: false, width: 100 },
            { key: false, name: 'Designation', index: 'Designation', editable: false, width: 100 },
            { key: false, name: 'LocationCode', index: 'LocationCode', editable: false, width: 100 }
        ],
        pager: $('#pager'),
        viewrecords: true,
        loadonce: true,
        rowNum: 10,
        height: '100%',
        width: '100%',
        autowidth: true
    });
}

Answer 1

如果可以使用 jQuery.ajax.

加载数据，我建议您 永远不要使用定义为函数的 datatype

您应该执行以下操作：

将 jqGrid 升级到最新的 free jqGrid (4.12.1)。
将datatype替换为datatype: "json"

最好在 SearchEmployee 函数中使用以下代码

$("#grid").jqGrid("GridUnload");
$("#grid").jqGrid({
    datatype: "json",
    url: "/Common/EmployeeSearchData/",
    mtype: "POST",
    ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
    prmNames: { id: "HRId" }, // the name of id property
    serializeGridData: function () {
        return JSON.stringify({
                   objEmpModel: {
                       EmployeeId: $("#EmployeeId").val(),
                       F_Name: $("#F_Name").val(),
                       L_Name: $("#L_Name").val()
                   }
               });
    },
    colNames: ["Employee Id", "Full Name", "Designation", "Location Code"],
    colModel: [
        { name: "EmployeeId" },
        { name: "FullName" },
        { name: "Designation" },
        { name: "LocationCode" }
    ],
    additionalProperties: ["HRId"], // include HRId in local data
    cmTemplate: { width: 100 }, // optional if you want to remove autowidth:true option
    pager: true,
    rowNum: 10,
    viewrecords: true,
    loadonce: true,
    forceClientSorting: true,
    autowidth: true
);

JqGrid 每次都加载 on Next 点击分页

JqGrid loading every time on Next click on paging

jquery

jqgrid

mvcjqgrid

JqG​​rid 每次都加载 on Next 点击分页

JqGrid loading every time on Next click on paging

jquery

jqgrid

mvcjqgrid

JqGrid 每次都加载 on Next 点击分页