jqGrid: datos POST al servidor para obtener los datos de filas (de filtrado y búsqueda)

Question

Tengo una forma como esta:

<form id='myForm'> 
<input type='text' name='search' /> 
<input type='text' name='maxPrice' /> 
</form> 

y mesa para mi jqGrid:

<table id='myGrid'></table> 

necesito a POST (no GET) los datos de myForm a mi método de servidor para obtener los datos de la fila y completar la cuadrícula. Hasta ahora, no he podido obtener jqGrid para enviar nada. Comprobé mi serialización de datos y estoy serializando los datos de mi formulario correctamente. Aquí está mi código jqGrid:

$("#myGrid").jqGrid({ 
    url: '/Products/Search") %>', 
    postData: $("#myForm").serialize(), 
    datatype: "json", 
    mtype: 'POST', 
    colNames: ['Product Name', 'Price', 'Weight'], 
    colModel: [ 
     { name: 'ProductName', index: 'ProductName', width: 100, align: 'left' }, 
     { name: 'Price', index: 'Price', width: 50, align: 'left' }, 
     { name: 'Weight', index: 'Weight', width: 50, align: 'left' } 
    ], 
    rowNum: 20, 
    rowList: [10, 20, 30], 
    imgpath: gridimgpath, 
    height: 'auto', 
    width: '700', 
    //pager: $('#pager'), 
    sortname: 'ProductName', 
    viewrecords: true, 
    sortorder: "desc", 
    caption: "Products", 
    ajaxGridOptions: { contentType: "application/json" }, 
    headertitles: true, 
    sortable: true, 
    jsonReader: { 
     repeatitems: false, 
     root: function(obj) { return obj.Items; }, 
     page: function(obj) { return obj.CurrentPage; }, 
     total: function(obj) { return obj.TotalPages; }, 
     records: function(obj) { return obj.ItemCount; }, 
     id: "ProductId" 
    } 
}); 

¿Puedes ver lo que estoy haciendo mal o debería estar haciendo de manera diferente?

Answer 1

Su principal error es el uso del parámetro postData en la forma:

postData: $("#myForm").serialize() 

Este uso tiene dos problemas:

1. El valor $("#myForm").serialize() sobrescribir todos los parámetros de las peticiones POST en lugar de la agregando parámetros adicionales.
2. El valor $("#myForm").serialize() se calculará solo una vez durante el tiempo de inicialización de la cuadrícula. Por lo tanto, enviará siempre search="" y maxPrice="" al servidor.

le sugiero que para reemplazar la forma con campos de edición con nombre para

<fieldset> 
<input type='text' id='search' /> 
<input type='text' id='maxPrice' /> 
<button type='button' id='startSearch'>Search</button> 
</fieldset> 

definir postData parámetro como objeto con métodos:

postData: { 
    search: function() { return $("#search").val(); }, 
    maxPrice: function() { return $("#maxPrice").val(); }, 
}, 

, y añadir onclick controlador de eventos al "Buscar botón "(ver fragmento de HTML anterior)

$("#startSearch").click(function() { 
    $("#myGrid").trigger("reloadGrid"); 
}); 

Además, no escribe nada sobre la tecnología de servidor que utiliza. Puede ser necesaria alguna modificación adicional para poder leer los parámetros en el lado del servidor (por ejemplo, serializeRowData: function (data) {return JSON.stringify(data);}, ver this y this). También te recomiendo que leas otra respuesta anterior: How to filter the jqGrid data NOT using the built in search/filter box.

Algunos otros pequeños errores como '/Products/Search") %>' en lugar de '/ Products/Search' o el uso del parámetro obsoleto imgpath (ver documentation) son menos importantes. Las opciones de columna predeterminadas como align: 'left' deberían eliminarse mejor.

Considere también usar la búsqueda en la grilla. Por ejemplo advance searching

$("#myGrid").jqGrid('navGrid','#pager', 
        {add:false,edit:false,del:false,search:true,refresh:true}, 
        {},{},{},{multipleSearch:true}); 

y también toolbar searching:

$("#myGrid").jqGrid('filterToolbar', 
        {stringResult:true,searchOnEnter:true,defaultSearch:"cn"}); 

es probable que pueda sustituir a la forma de búsqueda que se utiliza.