Question

我有一个加载所有员工的jqGrid＆＃39;页面加载数据。部门有一个选择列表。在更改选择列表上的选择时，将检索部门的数据，但它会再次重新加载相同的所有员工数据，而不是重新加载过滤后的数据。我怎样才能解决这个问题？

$(function () {            
    jQuery("#jQGridDemo").jqGrid({
        url: 'EmployeeTransfer.aspx/getEmployeesOnLoad',
        datatype: 'json',
        mtype: 'POST',
        colNames: ['Project Name', 'Project Code', 'Emp Code', 'Emp Name', 'Department', 'Designation', 'Stage', 'Id'],
        colModel: [
            { name: 'ProjectName', index: 'ProjectName', width: 90, stype: 'text', sorttype: 'string', search: true },
            { name: 'CompCode', index: 'CompCode', width: 90 },
            { name: 'FullCode', index: 'FullCode', width: 100, sorttype: 'integer', search: true },
            { name: 'EmpName', index: 'EmpName', width: 260, sorttype: 'string', search: true },
            { name: 'department', index: 'department', width: 270, hidden: true },
            { name: 'designation', index: 'designation', width: 260, sorttype: 'string', search: true },
            { name: 'Stage', index: 'Stage', width: 260 },
            { name: 'Id', index: 'Id', key: true, width: 70, sorttype: "int",hidden:true },
        ],
        search: true,
        rowNum: 30,
        height: 700,
        sortname: 'Id',
        rownumbers: true,
        sortable: true,
        gridview: true,
        loadonce: true,
        pager: '#jQGridDemoPager',
        viewrecords: true,
        autoencode: true,
        multiselect: true,             
        sortorder: "asc",
        caption: "Employee Details",
        onSelectRow: function (ids) {
            if (jQuery("#jQGridDemo").jqGrid('getGridParam', 'records') > 0)
                {                          
                    var rowId = $("#jQGridDemo").jqGrid('getGridParam', 'selrow');
                    var rowData = jQuery("#jQGridDemo").getRowData(rowId);
                    var colData = rowData['EmpName'];
                    jQuery("#jQGridSelect").addRowData(rowId, rowData);
                }
        },
        serializeGridData: function (data) {
            return $.toJSON(data);
        }

    }).jqGrid('hideCol', 'cb');

    $("select#ddlDepts").change(function () {

        var dept = $(this).find(":selected").text().trim();
        $.ajax ({
            type: "POST",
            url: "EmployeeTransfer.aspx/getEmployeesByDept",                   
            data: JSON.stringify({ strParam: dept}),
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,                         
            success: function (data) {

                if (data != null) {

                    jQuery('#jQGridDemo').jqGrid('clearGridData')
                          .jqGrid('setGridParam', { data: data, datatype: 'json' })
                          .trigger("reloadGrid", [{ current: true }]);
                }
            },
            error:
            function (x, e) {
                alert("The call to the server side failed. " + x.responseText);
            }

       });
    });
});

Answer 1

配置jqGrid时需要添加postData参数，例如：

jQuery("#jQGridDemo").jqGrid({ postData: { id: 1 } });

此id参数将发布到服务器。然后在来自ajax请求的回调中，您可以更新postData值，例如：

jQuery('#jQGridDemo').jqGrid('clearGridData')
                                  .jqGrid('setGridParam', { postData: { id: data.id } })
                                  .trigger("reloadGrid", [{ current: true }]);

Answer 2

最后，我能够解决我的问题。对于像我这样苦苦挣扎的人，下面是工作代码。

success: function (data) {
    if (data != null) {
        $('#jQGridDemo').clearGridData(true);
        $('#jQGridDemo').setGridParam({ 
            datastr: data.d, 
            datatype: 'jsonstring', 
            rowNum: data.d.length 
        }).trigger('reloadGrid'); 
    }
},

我的json字符串的格式如下：

{
    "d": {
        "page": 0,
        "total": 2,
        "record": 2,
        "rows": [
            {
                "id": 1,
                "cell": [
                    " XXXX",
                    "107",
                    "902000707",
                    "XXXXXXXX",
                    "IT",
                    "SOFTWARE ENGINEER",
                    "Transfer 107 to 109",
                    "1"
                ]
            },
            {
                "id": 2,
                "cell": [
                    "XXXX",
                    "108",
                    "902000164",
                    "XXXXXXXX",
                    "IT",
                    "IT ADMINISTRATOR",
                    "Transfer  108 to 107",
                    "2"
                ]
            }
        ],
        "SortColumn": null,
        "SortOrder": null
    }
}

jqgrid在页面加载时加载。但是不会在选择列表更改时重新加载

2 个答案: