如何用jQgrid綁定表單？

Question

我有一個3文本字段和2組合框的表單...我已經發送這些數據到服務器基於我的jqGrid將填充...我可以附加像& text1 = & text2 &等參數可以有人指向一個基於jqGrid綁定表單的示例。 謝謝！

UPDATE1： 我的做法

<script type="text/javascript"> 
//<![CDATA[ 
    jQuery(document).ready(function(){ 

    var url = "/cpsb/inventoryInquiry.do?method=getInventoryDetails" + $("#inventoryForm").serialize(); 

    navMenu(); 

    jQuery("#inventoryInq").jqGrid({ 
        sortable:true, 
        url: '', 
        datatype:'json', 
       colNames:['LPN','SKU', 'Location Description', 'Location Type','Pallet Status','On Hand Quantity', 'Inducted Quantity','Rejected Qty','Hold?','Expiration Date' ], 
       colModel:[ {name:'lpn',index:'lpn', width:85, sorttype:"int", align:"center", key:true}, 
          {name:'sku',index:'sku', width:40, sorttype:"int", align:"center"}, 
          {name:'locationDescription',index:'locationDescription', width:130, align:"center"}, 
          {name:'locationType',index:'locationType', width:100, align:"center"}, 
          {name:'palletStatus',index:'palletStatus', width:80, align:"center", sorttype:"int"}, 
          {name:'onHandQuantity', index:'onHandQuantity',width:130, align:"center", sorttype:"int"}, 
          {name:'inductedQuantity', index:'inductedQuantity', width:115, align:"center", sorttype:"int"}, 
          {name:'rejectedQuantity', index:'rejectedQuantity', width:120, align:"center", sorttype:"int"}, 
          {name:'hold',index:'hold', width:60,align:"center", sorttype:"int"}, 
          {name:'expirationDate', index:'expirationDate',width:120, align:"center"} ], 

       rowNum:10, 
       rowList:[10,20,30], 
       jsonReader : {repeatitems: false, 
        root: function(obj) { 
         return obj; 
        }, 
        page: function (obj) { return 1; }, 
        total: function (obj) { return 1; }, 
        records: function (obj) { return obj.length; } 
       }, 
       pager: '#pager', 
       sortname: 'LPN', 
       sortorder: "desc", 
       loadonce:true, 
       viewrecords: true, 
       multiselect: true, 
       caption: "Inventory Inquiry", 
       height:230 
      }); 
      jQuery("#inventoryInq").jqGrid('navGrid','#pager',{view:true,add:false,edit:false,del:false, searchtext:'Filter'},{},{},{},{multipleSearch:true}); 
     jQuery("#inventoryInq").jqGrid('hideCol', 'cb'); 


    }) ; 

    $("form#inventoryForm").submit(function() { 
     var newUrl = "/cpsb/inventoryInquiry.do?method=getInventoryDetails" + $(this).serialize(); 
     $("#inventoryInq").jqGrid("setGridParam","url", url).trigger("reloadGrid"); 
     return false; 
    }); 


//]]> 
</script> 

Answer 1

在JacobM的一般建議是好的，但也有一些細節。

首先textes text1和text2可能含有未允許URL中的特殊符號，所以他們應該得到更好的URL編碼的，而不是+ text1 + "&text2=" + text2應該更好地利用+ encodeURIComponent(text1) + "&text2=" + encodeURIComponent(text2)。 jQuery的功能jQuery.param()做到這一點internaly，所以不是

var url = "http://www.mySite.com/gridRequestURL?text1=" + text1 + "&text2=" + text2; 

我們可以使用

var url="http://www.mySite.com/gridRequestURL?"+$.param({text1:text1, text2:text2}); 

而且jQuery有一個更漂亮的功能，使的編碼所有輸入字段（輸入和選擇字段和複選框）：jQuery.serialize()。如果你喜歡，你想擁有服務器參數選擇的形式參數的名稱完全相同，那麼新的URL可以只是

var url = "http://www.mySite.com/gridRequestURL?" + $("#fpForm").serialize(); 

（其中「fpForm」的形式爲ID）和完整的代碼可以看起來像以下考慮

$("form#fpForm").submit(function() { 
    var newUrl = "/cpsb/cPSBBusinessErrors.do?" + $(this).serialize(); 
    $("#gridId").jqGrid("setGridParam","url", url).trigger("reloadGrid"); 
    return false; 
} 

拿去，如果你使用的jqGrid的postData參數，URL將被自動與附加信息從postData（目標URL將從url和postData相結合）。

你也可以考慮只使用postData參數，但在How to filter the jqGrid data NOT using the built in search/filter box所描述的功能，那麼你應該只使用trigger("reloadGrid")無url改變。從postData的函數中應該實現的表單字段的讀取值的登錄。

如果使用HTTP POST（mtype: "POST"）而不是默認GET，則可以使用與上述相同的信息設置postData參數，而不是將信息附加到url參數。