Question

我希望在保存时将表单数据（包含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仅显示员工列数据，甚至不显示部门和角色的任何数据，仅显示城市列的值。

Answer 1

如果您需要验证数据，请先使用editrules: {custom: true, custom_func: ...}查看the documentation。

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

更新：如果postdata中的beforeSubmit错误，那么您应该验证编辑对话框的<input>和<select>字段的ID相同的值，例如name的{{1}}属性的值。我建议您对colModel代码的临时部分发表评论。如果加载select的动态选项，则建议使用dataInit，建议对静态值使用dataUrl，例如value列。

Answer 2

我使用了editoptions的“value”和“dataInit”以及edittype：“select”来解决问题。 value：用于给出默认值 dataInit：初始化为选择的自动完成/选择。

正确的方法

{ name：“city”，index：“city”，editable：true，edittype：“select”，editrules：{required：true}， editoptions：{ 风格： “宽度：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}， editoptions：{ 风格： “宽度：95％”，
dataInit：function（elem）{ var optionBlank = document.createElement（'option'）; optionBlank.text =“选择城市”; optionBlank.value =“选择城市”; elem.add（optionBlank）;
```
                 $(elem).addClass('cityChosen');
                     $(elem).chosen({search_contains:true}); 
             }//END Dataint
            }
```

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

如何在窗体编辑中使用jqgrid中的select选择编辑类型来验证/发布col

2 个答案: