Resaltar uno o varias filas según valor (jqGrid)

En este artículo quiero tratar el tema sobre cómo cambiar el color de una fila o varias de ellas en un jqGrid según el valor que tenga en algún campo en específico.

Supón que, en tu sitio tienes un jqGrid en el que muestras todos tus usuarios con los distintos campos que tienen en la base de datos nombre, apellidos, sexo, etc, y uno de estos es el estado del usuario Activo o Inactivo y quieres que los inactivos resalten sus filas de un color o con algún estilo en específico.

La solución que a continuación te muestro se hace completamente a nivel de vista en el modelo MVC (Modelo Vista Controlador), es decir se ejecuta en lenguaje del lado del de cliente, en este caso jquery.

Para hacer lo antes comentado se crea un arreglo.

var rowsToColor = [];

Después en la columna que se desea evaluar el valor se le añade la propiedad formatter seguido del nombre de la función que tendremos comprobando la condición necesaria para aplicar el estilo deseado a la fila.

{name:'ENABLE', index:'ENABLE', width:90, align:’left’, formatter: rowcolor},

Si tienes en el campo alguna función ya declarada en el formatter puedes incluir el código en tu función o declarar otra vez dicha columna y ponerle la propiedad hidden a true, para que no se muestre. En este caso el nombre de la función es rowcolor y debajo un ejemplo de cómo luciría.

function rowcolor(cellValue, options, rowObject) {         if (cellValue == 0)             rowsToColor[rowsToColor.length] = options.rowId;         return cellValue; }

En este caso evalúa el valor que viene en cellValue que no es más que el valor de la celda en cuestión y si es igual a 0, es decir, el usuario que está verificando esta desactivado guarda en la última posición del arreglo que declaramos el id de la fila para utilizarlo cuando el jqGrid esté completamente cargado, para ello se utiliza la propiedad loadComplete del componente.

loadComplete: function() {                                                for (var i = 0; i < rowsToColor.length; i++) {                                 $("#" + rowsToColor[i]).find("td").css("background-color", "#FF7F7F");                                 $("#" + rowsToColor[i]).find("td").css("color", "black");                              }                     }

En esta función se pueden hacer todas las demás cosas que se necesiten hacer cuando esté completamente cargado el jqGrid.

Este ciclo lo que hace es recorrer la variable que se declaró en un principio como arreglo y luego según la condición se fueron guardando los id de los <tr> entonces se selecciona el componente con ese id ya que jQuey cuando crea la tabla (jqGrid) le pone al tr la propiedad id que fuimos capturando con la condición ya una vez seleccionado con la función find acompañada de css se le aplica el estilo necesario.

Nota:

Es importante tener en cuenta que si en la misma vista se está utilizando más de un jqGrid es necesario especificar en el selector que tabla se desea personalizar con este css ej.

$("#nombre_tabla #" + rowsToColor[i]).find("td").css("background-color", "#FF7F7F");

Espero les haya servido de ayuda.