我如何 validate/post col with edit type as select in jqgrid in form edit

Question

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

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

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 仅正确显示员工列数据，甚至不显示部门和角色的任何数据，仅显示城市列的值。

Answer 1

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

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

已更新：如果您在 beforeSubmit 中有错误的 postdata 那么您应该验证 <input> 和 <select> 的 ID编辑对话框的字段具有与 name 属性或 colModel 的值相同的值。我建议您对 dataInit 代码的 temporary 部分进行注释。在加载 select 的动态选项的情况下，建议使用 dataUrl，对于静态值，建议使用 value，如在 role 列中。

Answer 2

我同时使用了 "value" 和 "dataInit" 编辑选项以及 edittype:"select" 来解决这个问题。 value : 用于给出默认值 dataInit : 初始化为选择 autocomplete/select.

正确的做法

{ 名称："city"，索引："city"，可编辑：真，编辑类型："select"，编辑规则：{required:true}，编辑：{ 风格:"width:95%", 值：{"Select City":"Select City"},
```
                dataInit: function (elem) {
                     $(elem).addClass('cityChosen');
                         $(elem).chosen({search_contains:true}); 
                 }//END Dataint
                }
```
错误的方法

{名称:"city", 索引:"city",editable:true,edittype:"select",editrules:{required:true}, 编辑：{ 风格："width:95%",
数据初始化：函数（元素）{ var optionBlank = document.createElement('option'); optionBlank.text = "Select City" ; optionBlank.value = "Select City" ; elem.add(optionBlank);
```
                 $(elem).addClass('cityChosen');
                     $(elem).chosen({search_contains:true}); 
             }//END Dataint
            }
```

第二个将破坏 select 元素的 id。

我如何 validate/post col with edit type as select in jqgrid in form edit

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

javascript

jquery

jqgrid