如何在jqGrid中显示添加表单？（已配置添加按钮）

你目前的jqGrid已经能正常加载数据，但点击添加按钮后表单内容不完整，核心原因是没有为列配置可编辑属性，同时navGrid的添加功能需要明确的字段配置才能正确渲染表单。下面是具体的调整方案：

原代码回顾 #

$("#list_records").jqGrid({ 
    url: "getGridData.php", 
    datatype: "json", 
    mtype: "GET", 
    colNames: ["UserId", "Mobile Number"], 
    colModel: [ 
        { name: "id",align:"right"}, 
        { name: "mobilenumber"} 
    ], 
    pager: "#perpage", 
    rowNum: 10, 
    rowList: [10,20], 
    sortname: "id", 
    sortorder: "asc", 
    height: 'auto', 
    viewrecords: true, 
    gridview: true, 
    // editurl: 'getGridData.php' 
    caption: "" 
}); 
jQuery("#list_records").jqGrid('navGrid','#perpage',{edit:true,add:true,del:true});

关键修改点 #

• 给colModel中的字段添加editable: true，明确该字段可以在添加/编辑表单中显示
• 可选：通过editoptions配置输入框的类型、占位提示，优化用户填写体验
• 完善navGrid的配置，自定义添加表单的标题、弹窗宽度等细节

修改后的完整代码 #

$("#list_records").jqGrid({ 
    url: "getGridData.php", 
    datatype: "json", 
    mtype: "GET", 
    colNames: ["UserId", "Mobile Number"], 
    colModel: [ 
        { 
            name: "id",
            align:"right",
            editable: true, // 允许该字段在表单中编辑
            editoptions: {
                type: "text",
                placeholder: "请输入用户ID" // 输入框提示文字
            },
            editrules: {required: true} // 设置为必填字段
        }, 
        { 
            name: "mobilenumber",
            editable: true,
            editoptions: {
                type: "tel", // 指定为手机号输入类型
                placeholder: "请输入手机号码"
            },
            editrules: {required: true, number: true} // 必填且必须为数字格式
        } 
    ], 
    pager: "#perpage", 
    rowNum: 10, 
    rowList: [10,20], 
    sortname: "id", 
    sortorder: "asc", 
    height: 'auto', 
    viewrecords: true, 
    gridview: true, 
    editurl: 'getGridData.php', // 必须开启，表单提交需要对应接口接收数据
    caption: "用户信息列表" 
}); 

// 定制添加表单的具体配置
jQuery("#list_records").jqGrid('navGrid','#perpage',
    {edit:true,add:true,del:true, search:false}, // 基础按钮显示配置
    {}, // 编辑表单默认配置（留空使用默认）
    {
        // 添加表单的自定义设置
        addCaption: "添加新用户",
        width: 400,
        closeAfterAdd: true, // 添加完成后自动关闭弹窗
        reloadAfterSubmit: true // 添加成功后自动刷新表格数据
    },
    {}, // 删除表单默认配置
    {}  // 搜索表单默认配置
);

额外注意事项 #

1. editurl是必填项：添加表单提交时会向该接口发送新增数据，一定要配置正确的接口地址
2. editrules可以帮你做前端校验，比如手机号格式、必填项检查，避免无效数据提交
3. 如果某个字段不需要在添加表单中出现，直接去掉该字段的editable: true即可

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