Campo de búsqueda universal para jqgrid

Soy nuevo en jqgrid y descubrí que hay cuatro formas de implementar una búsqueda en jqgrid:

a toolbar searching a custom searching a single field searching a more complex approach involving many fields and conditions - advanced searching 

Me gustaría saber si es posible implementar un “estilo de google” de búsqueda universal en el que solo tendría un campo de texto para la consulta de búsqueda. Si escribiera algo en ese campo, trataría de buscar de todos los datos en la grilla.

EDITAR : me gustaría buscar todos los datos una vez y usar la búsqueda de ese conjunto de datos local.

Ver imagen adjunta.

enter image description here

Hay muchas formas de implementar dicho requisito. Preparé dos demos que demuestran una de la posible solución: la primera y la siguiente . La segunda demostración en la versión mejorada de la primera donde uso el plugin jQuery de iluminación de la misma manera que lo describo aquí .

Antes que nada, agrego un cuadro de entrada con el botón a la barra de herramientas superior de la grilla. Uso la toolbar: [true, "top"] para agregar una barra de herramientas vacía en la parte superior de la cuadrícula. Luego uso el siguiente código

 $('#t_' + $.jgrid.jqID($grid[0].id)) .append($("
 " + "
"));

para llenar la barra de herramientas con el fragmento de HTML

 
 

Para comenzar a buscar utilicé el siguiente código JavaScript

 $("#globalSearchText").keypress(function (e) { var key = e.charCode || e.keyCode || 0; if (key === $.ui.keyCode.ENTER) { // 13 $("#globalSearch").click(); } }); $("#globalSearch").button({ icons: { primary: "ui-icon-search" }, text: false }).click(function () { var rules = [], i, cm, postData = $grid.jqGrid("getGridParam", "postData"), colModel = $grid.jqGrid("getGridParam", "colModel"), searchText = $("#globalSearchText").val(), l = colModel.length; for (i = 0; i < l; i++) { cm = colModel[i]; if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) { rules.push({ field: cm.name, op: "cn", data: searchText }); } } postData.filters = JSON.stringify({ groupOp: "OR", rules: rules }); $grid.jqGrid("setGridParam", { search: true }); $grid.trigger("reloadGrid", [{page: 1, current: true}]); return false; }); 

donde $grid es la grilla donde comenzamos a buscar ( var $grid = $("#list"); ).

Para mejorar un poco la visibilidad de los elementos en la barra de herramientas superior usé un CSS adicional simple

 .ui-jqgrid .ui-userdata { height: auto; } .ui-jqgrid .ui-userdata div { margin: .1em .5em .2em;} .ui-jqgrid .ui-userdata div>* { vertical-align: middle; } 

Los resultados se ven como en la imagen de abajo

enter image description here

La segunda demostración usa el complemento de iluminación para mejorar la visibilidad de la cuadrícula para que el usuario vea inmediatamente en qué fila de la búsqueda se encuentra el campo:

enter image description here

Uno puede ver que durante la creación del filtro de búsqueda omití las columnas que tienen la propiedad search: false (como la columna "note" ) y las columnas que tienen stype: "select" . Utilicé el filtro "cn" (contiene) en todas las columnas.

Sí, esto es posible, y muy simple, podría agregar. Simplemente coloque un cuadro de texto sobre su cuadrícula (o donde quiera que lo desee):

Y un botón de búsqueda:

Search

Y aquí está el jQuery que necesita para el evento click de ese botón:

 $("#search-button").button().click(function(){ searchString = $.trim($("#search-string").val()); // check to see a search term has been entered in the textbox if(searchString == ""){ alert("Please enter a word or phrase before searching!"); // reset search box value to empty $("#search-string").val("").focus(); } else{ // set your grid's URL parameter to your server-side select file (that queries the DB) // we pass one parameter - the search string from the textbox $("#your-grid").jqGrid('setGridParam',{url:'crud/full-text-search.php?searchString='+searchString}); // This line may need to be changed (if you use XML instead of JSON) // It will reload the grid, using the new URL with the search term parameter $("#your-grid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); } }); 

Por supuesto, en su archivo del lado del servidor que consulta la base de datos, tendrá que tomar ese parámetro de URL que contiene la cadena de búsqueda, y construir su consulta con la cláusula WHERE correcta …