我如何验证/发布编辑类型为表单编辑中的 jqgrid 选择的列

How can I validate/post col with edit type as select in jqgrid in form edit

本文关键字：编辑类型表单选择 jqgrid 布编辑何验证验证更新时间：2023-09-26

我想在保存时将我的表单数据（包含 3 个选择（选择）字段）发送到服务器。

我该怎么做？我无法在任何函数中检索它们的值：

beforeSubmit、onclickSubmit和beforeCheckValues。

colNames:['Role','Department','Employee','City','employeeId','deptId'],
                colModel:[
                {name:"role", index:"role", width:200,editable:true, edittype:"select",formoptions:{rowpos:2},editoptions:{
                    style:"width:95%" ,
                    dataInit: function (elem) {
                        var optionBlank = document.createElement('option');
                        optionBlank.text = "Select Role" ;
                        optionBlank.value = "Select Role" ;
                        elem.add(optionBlank);
                        $(elem).addClass('roleChosen');
                        $(elem).chosen({search_contains:true});
                    }
                    }
                },
                {name:"dept", index:"dept", width:200,editable:true, edittype:"select",formoptions:{rowpos:1},editrules:{required:true},editoptions:{ 
                        style:"width:95%",
                        dataInit: function (elem) {
                            $.ajax({
                                url: "/getDeptNames.json",
                                dataType: "json",
                                type:"POST",
                                async:false,
                                success: function(data, status){    
                                    var optionBlank = document.createElement('option');
                                     optionBlank.text = "Select Department" ;
                                     optionBlank.value = "Select Department" ;
                                    elem.add(optionBlank);
                                     for(var i = 0; i<data.length; i++) {
                                         var option = document.createElement('option');
                                        option.innerHTML = "<b>" +data[i].name + "</b>";
                                        option.value =data[i].deptId;
                                        elem.add(option);
                                     }

                                     $(elem).addClass('deptNameChosen');
                                    $(elem).chosen({search_contains:true});
                                }
                            });
                        },
                        dataEvents: [
                                     { type: 'change', fn: function(e) {                                    
                                     getRolesFromDept($('.deptNameChosen :selected').val());                //will populate role column
                                      },
                                     }
                                    ]
                    }
                },
                {name:"employee", index:"employee", width:150,editable:true,editrules:{required:true,custom: true,custom_func: empVldtnCheck},editoptions:{
                     style:"width:95%",
                     dataInit: function (elem) {
                                var autocompleteSource = function(request, response,term) { 
                                    $.ajax({
                                        url: "empAutoComplete.json",
                                        contentType: "application/json; charset=utf-8",
                                        dataType: "json",
                                        type: "GET",
                                        async:false,
                                        data : {
                                            featureClass : "P",
                                            style : "full",
                                            name_startsWith : request.term
                                        },
                                        success : function(data, status) {
                                        response($.map(data.details, function(item) {
                                            return {
                                                label : item.employeeName,
                                                value : item.employeeName,
                                                employeeId : item.employeeId
                                            };
                                        }));
                                    },
                                        error: function (res, status) {
                                            alert(res.status+" : "+res.statusText+". Status: "+status);
                                        }
                                    });//END AJAX
                                };
                               $(elem).autocomplete({
                                   autoFocus: true,
                                   source: autocompleteSource,
                                   position: {  collision: "flip"  },
                                   minLength: 3,
                                   select: function (a, b) {
                                       getCityForEmployee(b.item.employeeId);
                                   }
                               });//END AUOTOCOMPLETE 

                     }
                    },formatter:function(cellValue,options,rowObject){
                        return "<span class='hyperLink'>" +"<a target='_blank' href="+ rowObject.employeeURL +"?employee="+ encodeURI(rowObject.employee) +">"+rowObject.employee+"</a>"  + "</span>";
                        }
                },
                {name:"city", index:"city",editable:true,edittype:"select",editrules:{required:true}, editoptions : { 
                    style:"width:95%",
                    multiple:true,
                    dataInit: function (elem) {
                         $(elem).addClass('cityChosen');
                            var optionBlank = document.createElement('option');
                            optionBlank.text = "Select Module" ;
                            optionBlank.value = "Select Module" ;
                            elem.add(optionBlank);
                        $(elem).chosen({search_contains:true});
                     }//END Dataint
                    }, width:200},
                {name:"employeeId",editable:false, index:"employeeId", hidden:true},
                {name:"deptId", index:"deptId",editable:false, hidden:true}
                ]

postData 仅正确显示员工列数据，

甚至不显示部门和角色的任何数据，仅显示城市列的值。

如果需要验证数据，应首先尝试使用editrules: {custom: true, custom_func: ...}请参阅文档。

像beforeSubmit这样的回调包含postdata（第一个参数）。它是对象，哪些属性是已编辑的列的名称。属性的值是输入用户的值。所以你只需要检查postdata.

已更新：如果您在beforeSubmit中有错误的postdata，则应验证编辑对话框的<input>和<select>字段的 ID 是否具有与colModel属性name值相同的值。我建议您注释dataInit代码的临时部分。在加载 select 的动态选项时，建议使用 dataUrl，建议对静态值使用 value，如role列中所示。

我同时使用了编辑选项的"value"和"dataInit"以及edittype："select"来解决这个问题。值：用于给出默认值dataInit ：初始化为选定的自动完成/选择。

正确的方法

{名称："城市"，索引："城市"，可编辑：真，编辑类型："选择"，编辑规则：{必需：真}，编辑选项： { 样式："宽度：95%"，值：{"选择城市"："选择城市"}，
```
                dataInit: function (elem) {
                     $(elem).addClass('cityChosen');
                         $(elem).chosen({search_contains:true}); 
                 }//END Dataint
                }
```
错误的方法

{name："city"， index："city"，editable：true，edittype："select"，editrules：{required：true}，编辑选项： { 样式："宽度：95%"，
dataInit： function （elem） { var optionBlank = document.createElement（'option'）; 选项空白文本 = "选择城市" ; 选项空白值 = "选择城市" ; elem.add（optionBlank）;
```
                 $(elem).addClass('cityChosen');
                     $(elem).chosen({search_contains:true}); 
             }//END Dataint
            }
```

第二个将销毁选择元素的ID。