Question

我有一个包含3个文本字段和2个组合框的表单...我已经将这些数据发送到服务器，我的jqGrid将被填充...我可以附加参数，如＆amp; text1 =＆amp; text2＆amp;有人可以指向我基于与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的建议很好，但有一些细节。

首先，短语text1和text2可能包含一个特殊符号，这些符号在网址中不允许，因此它们应该更好地进行网址编码，而不是+ text1 + "&text2=" + text2应该更好地使用+ encodeURIComponent(text1) + "&text2=" + encodeURIComponent(text2) {1}}。 jQuery函数jQuery.param()在内部执行此操作，因此不是

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参数，则该网址会自动附加postData的信息（目标网址将从url和{{ 1}}）。

您还可以考虑仅使用postData参数，但作为How to filter the jqGrid data NOT using the built in search/filter box中所述的功能，您应该只使用postData而不更改trigger("reloadGrid")。从您应在url。

的函数中实现的表单字段中读取值的登录

如果您使用HTTP POST（postData）而非默认GET，则可以使用与上述相同的信息设置mtype: "POST"参数，而不是将信息附加到postData参数。< / p>

如何用jQgrid绑定表单？

1 个答案: