Question

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

 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

如果可以使用datatype加载数据，我建议您永远不要使用jQuery.ajax 定义为函数。

您应该执行以下操作：

将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然后单击分页

1 个答案: