2012-10-02 38 views
0

我有一個jqGrid,我正在向colmodel發送一個名爲「設備」的特定屬性的字符串值。只要價值在網格上完美顯示,一切都可以。 我還添加了一個添加和編輯按鈕,一切都很好,工作正常,表格按預期顯示。 (原諒apparantly長職位,但它非常易於遵循)jquery窗體序列化 - 在jqgrid上的多個選擇

我修改添加表單現場叫設備及注入我自己的多重選擇這樣

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" decleared工作正常。後數據顯示在左側。當我點擊我自定義按鈕的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,春天是能夠處理項目的數組,但是當它被張貼着jQuery的序列化,動作不能找到叫paramiter「設備[]」 我看到一個鏈接here關於這個,我可以簡單地做到這一點嗎?

任何想法

+0

當我試圖捕捉一個可以有多個值的請求參數時,我使用了類似於:'@RequestParam(「equipments」)String [] equipments'。然後我通常會手動將String []轉換爲列表。右側的POST數據看起來「正確」,所以我會嘗試強制你的JS/jQuery代碼在這兩種情況下生成該表單。 – nickdos

回答

0

好了,所以別人,我做了什麼來解決這個問題是手動序列化形式形成的阱JSON字符串和字符串變量發送到服務器的好處。就像

//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 
    });