Как связать форму с 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 хорошее, но есть некоторые детали.

Сначала тексты text1 и text2 могут содержать специальные символы, которые не допускаются в URL, поэтому они должны быть лучшев кодировке URL и вместо + text1 + "&text2=" + text2 лучше использовать + encodeURIComponent(text1) + "&text2=" + encodeURIComponent(text2).Функция 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" - это идентификатор формы), и полный код можетвыглядит следующим образом

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

Примите во внимание, что если вы используете параметр postData jqGrid, к URL-адресу будет автоматически добавляться информация из postData (целевой URL будет объединен с urlи postData).

Можно также использовать только параметр postData, но как функцию, как описано в Как фильтровать данные jqGrid, НЕ используя встроенное поле поиска / фильтра , тогда вы должны использовать только trigger("reloadGrid") без изменения url.Логин для чтения значений из полей формы, который вы должны реализовать в функциях из postData.

Если вы используете HTTP POST (mtype: "POST"), а не GET по умолчанию, вы можете установить параметр postData с тем жеинформация, как описано выше, вместо добавления информации к параметру url.