Question

我有一个jqGrid，我将字符串值发送到colmodel，用于名为“ devices ”的特定属性。一切都很好，只要价值在网格上完美呈现。我还添加了一个添加和编辑按钮，一切正常，工作正常，表单按预期显示。（原谅长篇文章但很容易理解）

我在添加表单上修改了名为equipment的字段，并注入了我自己的多个select这样的

colModel

            {name:'equipments',index:'equipments', width:6, editable:true, edittype:'custom',
              editoptions:{
                  custom_element:function(){                                  
                        return $('<div id="mytrensferselect"><div class="transfer"><select id="select1" multiple="multiple"></select><a href="#" id="addbutton">add</a></div><div class="transfer"><select id="select2" multiple="multiple"></select><a href="#" id="removebutton">remove</a></div></div>');  
                      },
                      custom_value:function(ele){
                                return ele.val();           
                      }                               
                  }                           
            }

添加按钮 - beforeShowForm选项

                    bSubmit: "Save and New",
                    bCancel: "Cancel",
                    beforeShowForm: function(form) {
                            $.get('<c:url value="/moduleinstances/retrieveequipments?miId="/>' , function(data){  //load in my list of equipments as json string
                                var obj = jQuery.parseJSON(data);  //parse the resulting json in order to populate select1 and select2
                            $("#select1").html(obj.remaining);
                            $("#equipments").removeAttr("name").removeAttr("id").removeClass("customelement");
                            $("#select2").html(obj.owning).attr("name","equipments").attr("id","equipments").addClass("customelement");
                            $('#addbutton').click(function() {
                                return !$('#select1 option:selected').remove().appendTo('#equipments');
                            });
                            $('#removebutton').click(function() {
                                return !$('#equipments option:selected').remove().appendTo('#select1');
                            });
                            }); //End AJAX CALL abd CUSTOM Transfer Select logic

//Start Logic For Custom Save and Close Button

                        $('<a href="#">Save and Close<span class="ui-icon ui-icon-disk"></span></a>').click(function() {
                            if($.isNumeric($(form.selector+" #rateOfPay").val())){
                                $.post('<c:url value="/moduleinstances/create/${courseModule.id}"/>', $('#FrmGrid_list2').serialize() , function(data){
                                    $('#list2').trigger("reloadGrid");
                                    $("#cData").trigger('click');
                                }); 
                            }else{
                                    alert("Pay Rate must be numeric");
                            }                      
                        }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
                        .prependTo("#Act_Buttons>td.EditButton");
                        $('#title').attr('value','${courseModule.name}'); 
                        $("#leadLecturer").val( '${lecturer.id}' );
                    }

以下是我添加表单的相关部分。

enter image description here

当我点击保存并新建这是我通过上面bSubmit: "Save and New"发现的提交按钮时，功能正常。这个的postdata显示在左侧。当我点击Save and close按钮时，这是我的自定义按钮。帖子数据显示在右侧。

enter image description here

“保存并关闭”使用jquery序列化整个表单，如$('#FrmGrid_list2').serialize()，这就是它变得毛茸茸的地方。

如果我们查看两种情况下设备的贴子，我们可以看到名称差异。似乎jqGrid足够聪明，可以找出它的数组值，而jquery serialize（）并没有像我想要的那样。我正在使用Spring MVC 3.0，这里是我的设备数据用于操作的地方。

@RequestMapping(value = "update", method = RequestMethod.POST)
public @ResponseBody String update(Model uiModel,
        @RequestParam("id") Long mId,
        @RequestParam("campus") Long cId,
        @RequestParam("leadLecturer") Long lId,//This is actually a Person ID.
        @RequestParam("semesterStartDate") @org.springframework.format.annotation.DateTimeFormat(pattern = "MMMM dd, yyyy") java.util.Calendar semesterstartdate,
        @RequestParam("semesterEndDate") @org.springframework.format.annotation.DateTimeFormat(pattern = "MMMM dd, yyyy") java.util.Calendar semesterenddate,
        @RequestParam("tuitionStartDate") @org.springframework.format.annotation.DateTimeFormat(pattern = "MMMM dd, yyyy") java.util.Calendar tuitionstartdate,
        @RequestParam("tuitionEndDate") @org.springframework.format.annotation.DateTimeFormat(pattern = "MMMM dd, yyyy") java.util.Calendar tuitionenddate,
        @RequestParam("rateOfPay") Double rateOfPay,
        @RequestParam("equipments[]") ArrayList<String> equipments,
        HttpServletRequest httpServletRequest) { Bla...bla...bla }

看看最后一个 @RequestParam ，Spring能够处理项目数组，但是当它通过jQuery序列化发布时，该动作找不到名为“设备”的对手] ” 我看到了关于此的链接here，我可以简单地执行此操作吗？

任何想法

Answer 1

好的，为了其他人的利益，我为解决问题所做的是手动将表单序列化为格式良好的json-string并将该字符串变量发送到服务器。像

这样的东西

//select each form element and get its value using jquery
    var customPostData = '({ sessionNumber: "'+$("#sessionNumber").val()+'", sessionDate: "'+$("#sessionDate").val()+'", starttime: "'+$("#starttime").val()+'", endtime: "'+$("#endtime").val()+'", sessionStatus: "'+$("#sessionStatus").val()+'", sessionType: "'+$("#sessionType").val()+'", topic: "'+$("#topic").val()+'", id: "'+myId+'", equipments:'+selectedequips.toSource()+'})';
    var submitdata = eval('(' + customPostData + ')'); //use parseJSON insted of eval

    $.post("my-url", submitdata , function(data){
       //use the returning information in the data variable
    });

Jquery表单序列化 - 在jqgrid上进行多次选择

1 个答案: