Jqgrid edittype为select时editoptions的dataUrl未调用无法填充数据

问题根因 #

• 编辑入口未开启：原navGrid配置未开启编辑功能，只有进入编辑状态时jqGrid才会请求dataUrl加载下拉选项
• buildSelect方法逻辑错误：方法内通过$('#dept')查找尚未插入DOM的元素，无法拼接option节点
• 默认值匹配逻辑不对应：select的value为deptId，但/info接口返回的是deptName文本，二者无法匹配实现默认选中

修复后的完整代码 #

$(document).ready(function(){
    // 提前拉取部门列表，可避免编辑时重复请求
    let deptMap = {};
    $.get('./getDepts', function(res){
        res.forEach(item => {
            deptMap[item.deptId] = item.deptName;
        })
    })
    $("#grid").jqGrid({
        url: "./info",
        datatype: "json",
        mtype: "GET",
        ajaxSelectOptions:{
            type: "GET",
            dataType: "json",
            success: function (result) {
                console.log(result);
            }
        },
        colNames: ["DeptId", "DeptName", "StuId", "StuName", "StuDoj"],
        colModel: [
            { name: "deptId", hidden:true },
            // 调整部门列绑定逻辑，和select的value字段对齐
            { name:"deptId", width:90, editable:true, edittype:'select', formatter:'select', 
              editoptions:{
                value: deptMap,
                // 如果要保留dataUrl异步加载方式，注释上面的value，放开下面的配置即可
                /*
                dataUrl:'./getDepts',
                buildSelect: function(res){
                    let selectHtml = '<select name="deptId">';
                    res.forEach(obj => {
                        selectHtml += `<option value="${obj.deptId}">${obj.deptName}</option>`;
                    })
                    return selectHtml + '</select>';
                }
                */
            }},
            { name: "studentId", hidden:true },
            { name: "studentName", width: 80,editable:true },
            { name: "studentDoj",width: 90,editable:true }
        ],
        pager: "#pager",
        rowNum: 5,
        rowList: [5, 10, 20],
        sortname: "empId",
        sortorder: "asc",
        sortable:true,
        viewrecords: true,
        gridview: true,
        caption: "MyGrid",
        jsonReader: {
            repeatitems: false,
            id: "empId",
            root: function (obj) { return obj; },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.length; }
        }
    }); 
    // 开启编辑按钮，触发dataUrl请求逻辑
    $("#grid").jqGrid('navGrid','#pager',{add:false, edit:true, view:true,search:true});
});

关键修改说明 #

• 开启navGrid的edit:true配置，启用编辑功能，触发dataUrl请求
• 重写buildSelect逻辑，直接拼接option字符串返回，避免DOM查找失败
• 调整列绑定字段为deptId，和select的value字段匹配，formatter:'select'会自动根据映射关系把deptId渲染为对应的deptName，编辑时也会自动选中对应value的option
• 可选提前拉取部门列表生成映射，避免每次进入编辑都重复请求dataUrl

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