2010-04-08 14 views
6

Tengo una jqGrid con una navBar que tiene search: true y multipleSearch: true. Me gustaría agregar un botón a mi IU que agrega automáticamente una regla adicional a la búsqueda.¿Cómo manipulo una búsqueda/filtros de jqGrid?

He intentado manipular el postData para el filtro directamente, pero los valores agregados de esta manera no se muestran en la interfaz de usuario de búsqueda.

También he intentado acceder al cuadro de búsqueda directamente a través de jQuery, así:

$('#fbox_list').searchFilter().add(); 
$('#fbox_list .sf .data input').each(function(index) { 
    alert($(this).val()); 
}); 

Pero, además de la sensación de hacker, sólo funciona si el usuario ya ha hecho clic en el botón de búsqueda (el fbox_list div no está construido en carga).

¿Alguien más ha solucionado un problema como este?

Respuesta

7

Por el bien de la posteridad, aquí está el truco que estoy usando actualmente. La rejilla tiene un diámetro interior de list y el localizador tiene un diámetro interior de pager:

jQuery(document).ready(function() { 
    //Initialize grid. 

    //Initialize the navigation bar (#pager) 

    //Hack to force creation of the search grid. 
    //The filter's ID is of the form #fbox_<gridId> 
    jQuery('#pager .ui-icon-search').click(); 
    jQuery('#fbox_list').searchFilter().close(); 

    //Example button events for adding/clearing the filter. 
    jQuery("#btnAddFilter").click(function() { 
     //Adds a filter for the first column being equal to 'filterValue'. 
     var postFilters = jQuery("#list").jqGrid('getGridParam', 'postData').filters; 
     if (postFilters) { 
      $('#fbox_list').searchFilter().add(); 
     } 

     var colModel = jQuery("#list").jqGrid('getGridParam', 'colModel'); 
     //The index into the colModel array for the column we wish to filter. 
     var colNum = 0; 
     var col = colModel[colNum]; 

     $('#fbox_list .sf .fields select').last().val(col.index).change(); 
     $('#fbox_list .sf .data input').last().val('filterValue'); 

     $('#fbox_list .sf .ops select.field' + colNum).last().val('eq').change(); 

     $('#fbox_list').searchFilter().search(); 
    }); 

    jQuery("#btnClearFilter").click(function() { 
     $('#fbox_list').searchFilter().reset(); 
    }); 
}); 
+0

Muchas gracias por esta publicación. He estado tratando de encontrar una forma de acceder al URI de XHR para cuando se actualice la grilla. Sin embargo, nunca pude lograr eso en mi cuadro de desarrollo de localhost debido a problemas de permisos de XHR. Su mención de "jqGrid ('getGridParam', 'postData')" me dio una forma de generar el URI. Gracias de nuevo. – Justin

+0

¿No hay un método más simple? – Don

+0

@Don Publiqué esta pregunta con la esperanza de que alguien me proporcione una. Hasta ahora, no he visto uno que funcionó. Por supuesto, he estado alejado de la escena jqGrid por un tiempo, así que uno puede haber sido parchado. – AaronSieb

0

Si se refiere a la barra de herramientas de filtro, se puede hacer esto: (el estado es el nombre Col - así, reemplace "#gs_status" w/"#gs_" + your_col_name

 jQuery("#distributor_grid").jqGrid('showCol',['status']);   
     jQuery(".ui-search-toolbar #gs_status") 
      .val('ALL') 
      ; 

     $('#distributor_grid').RefreshData(); // triggers toolbar 

+0

Hmm ... Tal vez tenemos una versión no coincidente. Cuando intento '$ ('#

') .RefreshData();', recibo un error JS (el método no existe). De cualquier forma, ¿cómo establecería los operadores de búsqueda (igual, no igual, etc.) con este método? – AaronSieb

0

para borrar entradas, selecciona y RESET rejilla

$("td#refresh_navGrid").click();