jqGrid Filtering Records

Question

Parece que ha habido algunas preguntas aquí con respecto a este tema, y ​​tienen algunas excelentes respuestas, pero parece que mi caso es un poco diferente. Necesito filtrar los registros que se muestran en un jqGrid, pero completamente del lado del cliente.

Por una serie de razones, la mejor manera para poblar mi grilla es con una matriz que se emite directamente en JavaScript en la página. La cuadrícula en sí no interactúa con el servidor en absoluto. Tengo algunos AJAX personalizados sucediendo en varios eventos de cuadrícula, pero eso es todo. (Básicamente, estoy integrando esto con un conjunto existente de servicios disponibles que no pueden cambiar significativamente.)

Lo que estoy buscando hacer es filtrar la grilla en base a un simple ingreso de texto y un botón. Mi página tiene la entrada de texto, el botón y una tabla (que se convierte en la cuadrícula en el documento listo). Me gustaría enlazar al evento click del botón (enlace de eventos jQuery normal, nada especial) y usar el valor de la entrada de texto como filtro de visualización en jqGrid.

Por "filtro" me refiero a mostrar solo los registros que contienen una coincidencia (en cualquier campo) para el texto en la entrada. Luego, para mostrar todos los registros, simplemente vacíe la entrada y haga clic en el botón nuevamente. Además, la grilla es multiselección y las selecciones deben persistir a través del filtrado. Solo necesito poder ocultar las filas que no coinciden con lo que está en la entrada.

¿Esto es posible?

Answer 1

Para filtrar la cuadrícula local que solamente deben cubrir filters propiedad del parámetro postData de jqGrid y establecer, además, search:true. Para guardar la selección de la grilla, puede usar reloadGrid con el parámetro adicional [{page:1,current:true}] (vea here).

El código correspondiente puede ser el siguiente

$("#search").click(function() { 
    var searchFiler = $("#filter").val(), grid = $("#list"), f; 

    if (searchFiler.length === 0) { 
     grid[0].p.search = false; 
     $.extend(grid[0].p.postData,{filters:""}); 
    } 
    f = {groupOp:"OR",rules:[]}; 
    f.rules.push({field:"name",op:"cn",data:searchFiler}); 
    f.rules.push({field:"note",op:"cn",data:searchFiler}); 
    grid[0].p.search = true; 
    $.extend(grid[0].p.postData,{filters:JSON.stringify(f)}); 
    grid.trigger("reloadGrid",[{page:1,current:true}]); 
}); 

hice the demo para usted que filtran por dos columnas 'cliente' ('nombre') y 'Notas' ('nota') se puede ampliar el código para buscar en todas las columnas que necesita.

Depende de lo que signifique exactamente con la selección de la fila de guardado, puede necesitar guardar la selección actual del selarrrow en una variable y restaurar las filas seleccionadas con respecto al método setSelection.