MVC环境下jQGrid编辑/添加窗口空白问题咨询

核心问题分析 #

• 表格ID不匹配：初始化代码用$('#StudentGrid')绑定表格，但HTML里的表格ID是StudentId，导致jQGrid无法将列模型关联到编辑表单。
• 列模型缺少可编辑属性：colModel中所有字段都没设置editable: true，jQGrid默认editable为false，因此编辑窗口不会渲染这些字段的输入控件。
• 选择器语法错误：多处代码使用$("studentId")这种错误写法，正确的ID选择器需要加#前缀（如$("#studentId")），虽不直接导致表单不显示，但会引发数据读写失败。

修复代码示例 #

1. 修正HTML表格ID #

<table style="width:90%;margin:5px;">
    <tr style="vertical-align:top;">
        <td>
            <div style="margin-top:5px;"></div>
            <div class="textborder">
                <span>Student Database</span>
            </div>
            <!-- 修正ID与初始化代码匹配 -->
            <table id="StudentGrid"></table>
            <div id="pager"></div>
        </td>
    </tr>
</table>

2. 为colModel添加可编辑属性 #

colModel: [
    {
        name: 'studentId',
        index: 'studentId',
        editoptions: { readonly: 'readonly' },
        width: 25,
        hidden: false,
        sortable: false,
        editable: true // 新增可编辑属性
    },
    {
        name: 'name',
        index: 'name',
        editoptions: { size: 25, maxlength: 20 },
        hidden: false,
        sortable: true,
        width: 25,
        align: "center",
        editable: true // 新增可编辑属性
    },
    {
        name: 'grade',
        index: 'grade',
        hidden: false,
        sortable: true,
        width: 25,
        align: "center",
        editable: true // 新增可编辑属性
    }
],

3. 修正选择器错误 #

// 初始化代码中的postData
postData: {
    StudentId: $("#studentId").val(), // 添加#前缀
    Name: $("#name").val(),
    Grade: $("#grade").val()
},

// updateRow函数中的editData
editData: {            
    StudentId: $("#studentId").val(), // 添加#前缀
    Name: $("#name").val(),
    Grade: $("#grade").val()
},

4. 优化表单元素选择器 #

jQGrid生成的表单元素ID格式为id_g_字段名，修正readonly设置的选择器：

beforeShowForm: function (form) {
    if (id == 'new') {
        $('#id_g_studentId').removeAttr('readonly');
    }          
},
afterComplete: function (response, postdata, formid) {
    $('#id_g_studentId').attr('readonly', 'readonly');
    $("#StudentGrid").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid");
    checkForError('An error occured trying to save Student record.', response, null, null, formid);
},

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