jQGrid在loadComplete事件中无法加载自定义userData问题排查

我尝试从服务器返回的JSON中获取自定义的userdata字段，服务器返回的JSON结构如下：

{"total":1,"page":1,"records":1,"userdata":{"aaa":"bbb"},"rows":[{"id":0,"cell":["ampolla","1"]}]}

我在loadComplete事件中尝试通过以下代码获取该字段：

loadComplete: function() { console.log(jQuery("#gridDataGraphic").getGridParam('userData')); }

我以为JSON里用userdata、获取时用userData的方式是正确的，但控制台始终返回undefined。表格本身已经能正常加载并显示数据，以下是我的完整jqGrid配置：

$("#${gridDataGraphic}").jqGrid({
    url: gridUrl,
    postData: gridPostData,
    datatype: "json",
    height: "auto",
    autoencode: true,
    shrinkToFit: true,
    autowidth: true,
    multiselect:false,
    forceFit:true,
    loadui: '',
    loadtext: '',
    altRows: true,
    altclass: 'ui-priority-altRow',
    colNames:["<bean:message key='label.category'/>", "<bean:message key='label.value'/>"],
    colModel:[
        {name:'${dataGraphicColumnCategory}', index:'${dataGraphicColumnCategory}', resizable:false, editable:false, search:false, sortable:true},
        {name:'${dataGraphicColumnValue}', index:'${dataGraphicColumnValue}', resizable:false, editable:false, search:false, sortable:true}
    ],
    rowNum: rowNums,
    gridview: true,
    mtype: "POST",
    pager: jQuery('#${pagerDataGraphic}'),
    sortname: "${lastOrderName}",
    sortorder: "${lastSortOrder}",
    page: "${ReportGenerationForm.currentPage}",
    sidx: "${param.sidx}",
    sord: "${param.sord}",
    viewrecords: true,
    onCellSelect: function(rowid,iCol,cellcontent) {},
    pginput:true,
    loadError: function (xhr, status, error){ showErrorDialog("<bean:message key='system.error.body'/>: " + error); },
    recordpos:"right",
    pagerpos:"center",
    loadComplete: function() { console.log(jQuery("#gridDataGraphic").getGridParam('userData')); },
    gridComplete: function() {},
    onSortCol: function (index, columnIndex, sortOrder) { $("#${gridDataGraphic}").trigger('reloadGrid'); }
});

恳请各位帮忙找出问题所在。

问题出在jqGrid对返回JSON中userdata字段的映射配置上，这里有两个简单的解决方案：

方案一：直接在loadComplete中读取原始响应数据 #

loadComplete回调函数会自动接收服务器返回的完整JSON对象作为参数，你可以直接从这个参数里提取userdata，不需要依赖jqGrid的参数映射：

loadComplete: function(data) {
    console.log(data.userdata); // 直接获取服务器返回的userdata对象
}

这种方式最直接，也不需要额外配置，马上就能看到结果。

方案二：配置jsonReader让jqGrid正确映射userdata #

如果你还是想用getGridParam('userData')来获取这个字段，需要在jqGrid的配置中添加jsonReader，明确指定userdata字段的位置：

$("#${gridDataGraphic}").jqGrid({
    // 其他现有配置...
    jsonReader: {
        userdata: "userdata" // 告诉jqGrid根节点下的userdata字段就是要映射的userData参数
    },
    loadComplete: function() {
        console.log(jQuery("#gridDataGraphic").getGridParam('userData')); // 现在能正确获取到了
    }
});

为什么之前的代码不行？ #

很多jqGrid版本中，默认的jsonReader并不会自动将根节点下的userdata字段映射到jqGrid的userData参数中，必须显式配置这个映射关系，或者直接读取原始响应数据。你的服务器返回的JSON结构是正确的，只是缺少了这一步映射配置。

内容的提问来源于stack exchange，提问作者Ivan