jquery - filtertoolbar - Cómo filtrar los datos de jqGrid NO utilizando el cuadro de búsqueda/filtro incorporado

jqgrid search example

Question

Quiero que los usuarios puedan filtrar los datos de la cuadrícula sin usar el cuadro de búsqueda intrínseca.

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

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

No puedo encontrar la API de grilla para lograr esto. ¿Alguien tiene alguna idea? Gracias.

Answer 1

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

Answer 2

Tenía los mismos requisitos, y (con la ayuda de Oleg) se me ocurrió esto:

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

Los detalles de cómo implementé esto están aquí:

jqGrid - Cambiar el formulario emergente de filtro / búsqueda - para ser plano en la página - no un diálogo

Tenga en cuenta que cargué específicamente todos los datos JSON para mi jqGrid por adelantado , y que para los grandes conjuntos de datos, hay un retraso al ejecutar este código en un dispositivo iPhone / Android a medida que escribe cada carácter.

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

Answer 3

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

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 a 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, su código debe parecerse al código de la respuesta de cómo volver a cargar jqgrid en asp.net mvc cuando cambio la lista desplegable :

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 el usuario cambia la opción seleccionada en el cuadro de selección con id=StateId u otro cuadro de selección con id=CityId (con mouse o teclado), se myReload la función myReload , que simplemente obligará a recargar datos en jqGrid. Durante la solicitud $.ajax correspondiente, que jqGrid hace por nosotros, el valor del parámetro postData se reenviará a $.ajax como parámetro de data . Si algunas de las propiedades de los data son funciones, $.ajax llamará a estas funciones. 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.

Por lo tanto, los datos del parámetro postData se agregarán a la url (los símbolos ''?'' Y ''&'' se agregarán automáticamente y todos los símbolos especiales, como los espacios en blanco, también se codificarán como de costumbre). Las ventajas del uso de postData es:

1. el uso de funciones dentro del parámetro postData permite cargar valores reales de todos los controles usados ​​hasta 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 algunas entradas "sin filtro" o "todas" en el cuadro de selección StateId , puede modificar la función que calcula el valor del parámetro StateId que debe adjuntarse a la URL del servidor desde

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;
}

Del lado del servidor, no debe filtrar StateId si recibe un valor vacío como parámetro.

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