jqGrid保存后下拉选项文本不显示问题求助

看你描述的场景——行一选中就进入编辑状态，回车就能保存，还有两个下拉列得依赖第一个的选择动态加载选项，结果保存后这俩列的单元格是空的，根本不显示选中的文本。我之前帮人排查过类似的问题，大概率是动态加载的下拉选项没和网格数据同步，或者保存后没重新渲染单元格，下面给你具体的解决思路和代码示例：

一、先检查下拉列的formatter配置 #

首先得确保动态下拉列有正确的formatter，它的作用就是把单元格里存的选项值转换成显示用的文本。比如你的第二个动态下拉列可以这么配：

{
    name: 'secondDropdown',
    index: 'secondDropdown',
    editable: true,
    edittype: 'select',
    // 关键：用formatter把值转成文本
    formatter: function(cellvalue, options, rowObject) {
        // 这里得能拿到动态加载的选项列表，我习惯存在全局变量或者行数据里
        var optionsList = window.secondDropdownOptions || [];
        var matchedOption = optionsList.find(opt => opt.value === cellvalue);
        // 有匹配的就显示文本，没有就显示原始值（避免空单元格）
        return matchedOption ? matchedOption.text : cellvalue;
    },
    editoptions: {
        // 根据第一个下拉的选中值动态请求数据
        dataUrl: function(rowId) {
            var firstDropdownVal = $('#yourGridId').jqGrid('getCell', rowId, 'firstDropdown');
            return '/your-api-path?firstVal=' + firstDropdownVal;
        },
        // 解析返回的HTML生成select选项，同时把选项存起来给formatter用
        buildSelect: function(data) {
            var selectHtml = '<select>';
            window.secondDropdownOptions = [];
            $(data).find('option').each(function() {
                var val = $(this).val();
                var text = $(this).text();
                selectHtml += `<option value="${val}">${text}</option>`;
                window.secondDropdownOptions.push({value: val, text: text});
            });
            selectHtml += '</select>';
            return selectHtml;
        }
    }
}

这里的核心是：formatter必须能拿到最新的动态选项列表，不然没法把值转成对应的文本。

二、保存后强制刷新单元格 #

因为jqGrid有时候不会自动更新保存后的单元格视图，所以你得在回车保存的回调里手动刷新这两个动态列的单元格。配置editRow的时候加上aftersavefunc：

$('#yourGridId').jqGrid({
    // 其他网格配置...
    onSelectRow: function(rowId) {
        // 行选中立即进入编辑状态，启用回车保存
        $(this).jqGrid('editRow', rowId, {
            keys: true,
            // 保存完成后的回调
            aftersavefunc: function(savedRowId) {
                // 方法1：刷新指定列的单元格
                $('#yourGridId').jqGrid('setCell', savedRowId, 'thirdColumn', '', '', {refresh: true});
                $('#yourGridId').jqGrid('setCell', savedRowId, 'fourthColumn', '', '', {refresh: true});
                // 方法2：直接刷新整行，更省心
                // $('#yourGridId').jqGrid('refreshRow', savedRowId);
            }
        });
    }
});

refreshRow或者带refresh: true的setCell会强制网格重新渲染对应单元格，触发formatter执行，就能显示正确的文本了。

三、确认编辑的值已同步到网格数据 #

有时候问题出在编辑后的值没被正确写入到网格的本地数据里，你可以在aftersavefunc里打印一下行数据看看：

aftersavefunc: function(savedRowId) {
    var rowData = $('#yourGridId').jqGrid('getRowData', savedRowId);
    console.log('第三列值：', rowData.thirdColumn);
    console.log('第四列值：', rowData.fourthColumn);
}

如果打印出来是空的，那得检查你的dataUrl返回的选项格式对不对，还有buildSelect生成的select选项有没有正确设置value属性。

四、多行编辑的场景？把选项绑定到对应行 #

如果你的网格是支持多行编辑的，用全局变量存选项会有冲突（比如编辑第二行的时候覆盖了第一行的选项），这时候建议把选项绑定到当前行的数据上：

buildSelect: function(data, options) {
    var optionsList = [];
    var selectHtml = '<select>';
    $(data).find('option').each(function() {
        var val = $(this).val();
        var text = $(this).text();
        selectHtml += `<option value="${val}">${text}</option>`;
        optionsList.push({value: val, text: text});
    });
    selectHtml += '</select>';
    // 把选项绑定到当前行的数据中
    var rowData = $('#yourGridId').jqGrid('getRowData', options.rowId);
    rowData.currentDropdownOptions = optionsList;
    $('#yourGridId').jqGrid('setRowData', options.rowId, rowData);
    return selectHtml;
}

然后formatter里从行数据里取选项：

formatter: function(cellvalue, options, rowObject) {
    var optionsList = rowObject.currentDropdownOptions || [];
    var matchedOption = optionsList.find(opt => opt.value === cellvalue);
    return matchedOption ? matchedOption.text : cellvalue;
}

最后提醒几个容易踩的坑 #

• 别指望编辑状态的下拉选项自动同步到网格视图，formatter和编辑组件是分开的，得自己处理
• 动态加载选项后，一定要确保formatter能拿到最新的选项列表
• 保存后必须触发视图刷新，不然单元格会一直是空的

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