2010-05-28 62 views
57

Quiero que los usuarios puedan filtrar los datos de la cuadrícula sin utilizar el cuadro de búsqueda intrínseca.Cómo filtrar los datos de jqGrid NO utilizando el cuadro de búsqueda/filtro incorporado

He creado dos campos de entrada para la fecha (desde y hasta) y ahora necesito decirle a la cuadrícula que adopte esto como su filtro y luego para solicitar nuevos datos.

Forjar una solicitud de servidor para datos de cuadrícula (puenteando la cuadrícula) y establecer que los datos de la cuadrícula sean los datos de respuesta no funcionará, porque tan pronto como el usuario intente reordenar los resultados o cambie la página, etc. solicitará nuevos datos del servidor usando un filtro en blanco.

Parece que no puedo encontrar API de red para lograr esto, ¿alguien tiene alguna idea? Gracias.

+0

Revisa this link (comprobar este enlace) http://stackoverflow.com/questions/17179777/search-with-autocomplete-in-codeigniter-and-jqgrid/17195094#17195094 –

Respuesta

78

Su problema puede ser resuelto muy fácilmente con respecto al parámetro postData incluyendo funciones y trigger('reloadGrid'). Intento explicar la idea más detallada.

Deje que usemos mtype: "GET". Lo único que hace la caja de filtro/búsqueda estándar después de mostrar la interfaz es añadir algunos parámetros adicionales a la url, enviar al servidor y volver a cargar los datos de la grilla. Si tiene su propia interfaz para buscar/filtrar (algunos controles de selección o casillas de verificación, por ejemplo), debe adjuntar su url usted mismo y volver a cargar la grilla con respecto al trigger('reloadGrid'). Para restablecer la información en la grilla, puede elegir la forma que prefiera. Por ejemplo, puede incluir en los controles de selección que tiene una opción como "no filtrar".

Para ser más exactos el código debería parecerse el código de la respuesta how to reload jqgrid in asp.net mvc when i change dropdownlist:

var myGrid = jQuery("#list").jqGrid({ 
    url: gridDataUrl, 
    postData: { 
     StateId: function() { return jQuery("#StateId option:selected").val(); }, 
     CityId: function() { return jQuery("#CityId option:selected").val(); }, 
     hospname: function() { return jQuery("#HospitalName").val(); } 
    } 
    // ... 
}); 
// 
var myReload = function() { 
    myGrid.trigger('reloadGrid'); 
}; 
var keyupHandler = function (e,refreshFunction,obj) { 
    var keyCode = e.keyCode || e.which; 
    if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/|| 
     keyCode === 35 /*end*/|| keyCode === 36 /*home*/|| 
     keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) { 

     if (typeof refreshFunction === "function") { 
      refreshFunction(obj); 
     } 
    } 
}; 

// ... 
$("#StateId").change(myReload).keyup(function (e) { 
    keyupHandler(e,myReload,this); 
}); 
$("#CityId").change(myReload).keyup(function (e) { 
    keyupHandler(e,myReload,this); 
}); 

Si la opción en el cuadro de selección de cambio de usuario seleccionado con id=StateId u otra caja de selección con id=CityId (con el ratón o el teclado), se llamará a la función myReload, que solo fuerza la recarga de datos en jqGrid. Durante la solicitud correspondiente $.ajax, que jqGrid hace por nosotros, el valor del parámetro postData se reenviará a $.ajax como parámetro data. Si algunas de las propiedades de data son funciones, se llamará a esta función por $.ajax. Por lo tanto, los datos reales de los cuadros de selección se cargarán y todos los datos se agregarán a los datos enviados al servidor. Solo necesita implementar la lectura de estos parámetros en su parte del servidor.

Así los datos de parámetro postData se añadirán a la dirección URL (símbolos '?' Y '&' será añadido automáticamente y todos los símbolos especiales como espacios en blanco serán también codificados como de costumbre). Las ventajas del uso de postData es:

  1. uso de funciones dentro postData parámetro le permite cargar valores reales de todos los controles utilizados en el momento de la recarga;
  2. Tu código de permanencia tiene una estructura muy clara.
  3. Todo funciona bien, no solo con las solicitudes HTTP GET, sino también con HTTP POST;

Si utiliza algún "sin filtro" o "todas" las entradas en el cuadro de selección StateId, puede modificar la función que calcular el valor de StateId parámetro que debe añade a la URL del servidor de

StateId: function() { return jQuery("#StateId option:selected").val(); } 

a algo como lo siguiente:

StateId: function() { 
    var val = jQuery("#StateId option:selected").val(); 
    return val === "all"? "": val; 
} 

en el lado del servidor que debiera hace ninguna filtración para StateId si recibe un valor vacío como un parámetro.

Opcionalmente puede usar myGrid.setCaption('A text'); para cambiar un título de la grilla. Esto permite al usuario ver más claro, que los datos en la cuadrícula se filtran con algunos criterios.

+0

@Oleg, puedo anular las funciones predeterminadas 'postData' con un' grid.setGridParam'? Estoy tratando de hacer esto, pero sin éxito. Parece que a pesar de que establezco un parámetro a través de 'grid.setGridParam', los stills obtienen la función' postData' predeterminada que he definido previamente. – AdrianoRR

+0

@AdrianoRR: Probablemente deberías escribir una nueva pregunta donde describas el problema que deseas resolver. ¿Que necesitas? ¿Desea que algunos parámetros no se envíen al servidor? ¿Necesita un formateo personalizado de los parámetros existentes (como la conversión a JSON)? ¿O es probable que no desee enviar ningún parámetro adicional al servidor? – Oleg

+0

@Oleg, al ver algunas otras publicaciones de tu me las arreglé para obtener mi propia respuesta. Al usar 'grid.getGridParam' puedo obtener los atributos de postData y configurarlos con los valores que desee. Entonces todo lo que tengo que hacer es llamar a 'grid.trigger (' reloadGrid '); 'y los cambios están listos. De todos modos, gracias por tu S.O. publicaciones! – AdrianoRR

2

que tenían los mismos requisitos, y (con la ayuda de Oleg) se le ocurrió esto:

enter image description here

Básicamente, el usuario comienza a escribir en el cuadro de texto "Nombre del empleado", e inmediatamente los resultados se muestran en el jqGrid.

Los detalles de cómo he implementado esta aquí:

jqGrid - Change filter/search pop up form - to be flat on page - not a dialog

Tenga en cuenta que me carga específicamente todo de los datos JSON para mi jqGrid con antelación, y que para grandes conjuntos de datos, hay es un retraso al ejecutar este código en un dispositivo iPhone/Android a medida que escribe cada carácter.

Pero, para aplicaciones web de escritorio, es una gran solución y hace que jqGrid sea más amigable para el usuario.

0

Al usar las funciones ReloadGrid() y jquery puede realizar sus propias funciones de filtrado personalizadas.

Cuestiones relacionadas