Rejilla pasando el valor del parámetro antiguo al servidor – ajax

Estoy tratando de aprender jqGrid. Usando el siguiente código, podría cargar datos al hacer clic en el botón de búsqueda. Busqué en muchos blogs y publicaciones de foros y descubrí que el tipo de datos se puede hacer como local para evitar la carga inicial. Todos esos están funcionando bien. Pero el valor del parámetro pasado al servidor en el segundo bash de búsqueda es el mismo valor antiguo del primer bash de búsqueda. ¿Cuál es la parte que falta en mi código de abajo?

Siguiente es el guion

  $(document).ready(function () { $('#txtLmiquidAmountFrom').val("800"); $('#txtLmiquidAmountTo').val("1200"); $("#grid").jqGrid({ url: "GamesList.aspx/GetMyGames", mtype: 'POST', postData: { gameSearch: $('#txtGameName').val() , ownerSearch: $('#txtOwner').val() , createdDateFrom: $('#txtCreatedFrom').val() , createdDateTo: $('#txtCreatedTo').val() , liquidAmountFrom: $('#txtLmiquidAmountFrom').val() , liquidAmountTo: $('#txtLmiquidAmountTo').val() }, datatype: "local", //json if want to load initially ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, serializeGridData: function (postData) { return JSON.stringify(postData); }, jsonReader: { repeatitems: false, root: function (obj) { return obj.d; } }, colNames: ['GameID', 'GameName', 'GameOwner', 'PlannedCloseDate', 'CreatedOnDate', 'GameLiquidAmount'], colModel: [ { name: 'GameID', index: 'GameID' }, { name: 'GameName', index: 'GameName' }, { name: 'GameOwner', index: 'GameOwner' }, { name: 'PlannedCloseDate', index: 'PlannedCloseDate', formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' } }, { name: 'CreatedOnDate', index: 'CreatedOnDate', formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' } }, { name: 'GameLiquidAmount', index: 'GameLiquidAmount' } ], rowNum: 10, /*rowList: [10, 20, 30],*/ pager: '#pager2', sortname: 'id', viewrecords: true, sortorder: "desc", caption: "Games", gridview: true, height: "auto", loadonce: true, recordtext: "Records {0} - {1} of {2}", emptyrecords: "No records to view", loadtext: "Loading...", pgtext: "Page {0} of {1}" }); $("#btnSearch").click(function (e) { $("#grid").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); e.preventDefault(); }); });  

Marcado HTML

  

Search

Created From Liquid Amount From Owner
Created To Liquid Amount To Game Name

Search Result

ACTUALIZAR

A continuación dos lo resolvieron

  1. Haciéndolo dynamic por la function uisng, como se menciona en la respuesta por @Oleg.
  2. Versión compleja de serializeGridData según lo comentado por el método @Oleg postData que no ejecuta la función

Para resolver el problema, debe usar funciones para cada propiedad dinámica de postData :

 postData: { gameSearch: function () { return $('#txtGameName').val(); }, ownerSearch: function () { return $('#txtOwner').val(); }, createdDateFrom: function () { return $('#txtCreatedFrom').val(); }, createdDateTo: function () { return $('#txtCreatedTo').val(); }, liquidAmountFrom: function () { return $('#txtLmiquidAmountFrom').val(); }, liquidAmountTo: function () { return $('#txtLmiquidAmountTo').val(); } } 

El problema en su código anterior: la statement $("#grid").jqGrid({...}); será ejecutado una vez . Llama $("#grid").jqGrid(); Con objeto como parámetro. El objeto se inicializará en el momento de la ejecución de la statement y los valores actuales se guardarán como propiedades de postData (el valor actual $('#txtGameName').val() se guardará como propiedad postData de postData del parámetro objeto). Describí el truco con funciones detalladas en la respuesta anterior .