El filtro automático jqGrid destaca el resultado de la búsqueda

Quiero ayuda para resaltar la parte de datos de la fila jqgrid a medida que coinciden.

Mi marcado jqGrid:

'

Y mi código jqGrid:

 var envVars=[]; //xml is a xml response sent from server $(xml).children('product').each(function(){ $(this).children('envvars').each(function(){ $(this).children('variable').each(function(){ var row={}; isPresent=true; row.name=$(this).attr('name'); row.value=$(this).attr('value'); envVars.push(row); }); }); }); jQuery("#tblEnvvars").jqGrid({ datatype: "local", data: envVars, colNames:['Name','Value'], colModel:[ {name:'name',index:'name', align:"left"}, {name:'value',index:'value', align:"left"} ], pager : '#EnvvarsGridpager', rowNum:10, rowList:[10,50,100], scrollOffset:0, height: 'auto', autowidth:true, viewrecords: true, gridview: true }); jQuery("#tblEnvvars").setGridParam({rowNum:10}).trigger("reloadGrid"); jQuery("#tblEnvvars").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn'}); 

por ejemplo:

si un elemento de la fila contiene LD_LIBRARY_PATH y tipos de usuario en LIB en el área de búsqueda, entonces LIB en LD_LIBRARY_PATH debe resaltarse.

Actualización: 15/12/2011

Encontré este complemento Highlight para resaltar, pero necesito ayuda para aplicarlo.

Lo usé para crear la captura de pantalla siguiente

enter image description here

Aquí está el código que utilicé

 jQuery("#list1").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn', afterSearch:highlightIt()}); function highlightIt() { $('#list1 > tbody > tr > td').highlight('HOST'); } 

Mira la demostración de la respuesta . Si usa beforeSearch (consulte la sugerencia del comentario de Justin Ethier), puede modificar fácilmente la demostración para usar filterToolbar .

ACTUALIZADO : Después de volver a leer tu pregunta una vez más, me gusta tu idea para resaltar los patrones de búsqueda muy interesantes. Así que creé la demostración que demuestra cómo implementar su requerimiento. Usé las opciones

 loadonce: true, ignoreCase: true 

para hacer un filtrado local de los datos que no sea sensible a mayúsculas y minúsculas. Si utiliza tipos de datos ya locales (cualquier tipo de datos excepto 'xml' y 'json' ), los datos ya se guardarán localmente y no es necesario agregar una loadonce: true adicional de loadonce: true .

Al escribir en el filtro de búsqueda sobre los patrones de búsqueda de la grilla, los datos no solo serán filtrados por los patrones, sino que se resaltará la parte de patrón de la misma celda en la columna, lo que mejora la visibilidad. Para que pueda ver los resultados como en la siguiente imagen:

enter image description here

Ahora sobre la implementación. Antes que nada uso el complemento Highlight que encontraste, pero cambié la línea

 spannode.className = 'highlight'; 

a

 spannode.className = 'ui-state-highlight'; 

para ser más compatible con jQuery UI CSS.

No utilizo ninguna función de callback de filterToolbar porque se llamarán todas las devoluciones de llamada antes de que se llene el nuevo cuerpo de la grilla. El relleno de filterToolbar filters parte de los datos postData , establece el parámetro de search de jqGrid en true y dispara reloadGrid . Así que uno debe resaltar los datos dentro de la callback loadComplete (o gridComplete ) porque en este momento todos los datos que deben resaltarse están en la grilla. Así que utilicé filterToolbar en la forma simple

 $("#list1").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'}); 

La implementación de loadComplete que se encuentra a continuación:

 loadComplete: function () { var filters, i, l, rules, rule, iCol, $this = $(this); if (this.p.search === true) { filters = $.parseJSON(this.p.postData.filters); if (filters !== null && typeof filters.rules !== 'undefined' && filters.rules.length > 0) { rules = filters.rules; l = rules.length; for (i = 0; i < l; i++) { rule = rules[i]; iCol = getColumnIndexByName($this, rule.field); if (iCol >=0) { $('>tbody>tr.jqgrow>td:nth-child(' + (iCol + 1) + ')', this).highlight(rule.data); } } } } }