jqGrid Filtrado de registros

Parece que ha habido algunas preguntas aquí con respecto a este tema, y ​​tienen algunas respuestas excelentes, 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.

Con “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.

es posible?

Para filtrar la cuadrícula local, solo debe rellenar la propiedad de filters del parámetro postData de jqGrid y establecer adicionalmente search:true .

Para guardar la selección de la grilla, puede usar reloadGrid con el parámetro adicional [{page:1,current:true}] (ver aquí ).

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 la demostración para usted que filtra para dos columnas ‘Cliente’ (‘nombre’) y ‘Notas’ (‘nota’) puede extender 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 .