Agregar una clase de CSS a una columna

Question

Cómo puede agregar su propia clase a una columna dentro de jqgrid. Como veo, los elementos de entrada html obtienen la clase "FormElement". Necesito agregar una clase a una columna en particular. Encontré esto http://www.trirand.com/blog/?page_id=393/help/cell-tooltip-1/#p21526, pero no estoy seguro de si es la forma más conveniente de lograr esto? Me refiero a ir a través de todas las filas y celdas y luego cambiar manualmente una propiedad de clase; parece ser una sobrecarga para esa tarea "simple".

ACTUALIZACIÓN

Quiero añadir clase porque quiero utilizar la funcionalidad de este widget multiselect http://quasipartikel.at/multiselect/. Este widget funciona a través de clases definidas. Es por eso.

Answer 1

Hay una opción de colmodel classes que hace justo lo que necesita. Desde el jqGrid documentation:

clases

cadena

Esta opción permite añadir clases a la columna. Si se usará más de una clase, se debe establecer un espacio. Por ejemplo, classes:'class1 class2' establecerá una clase 1 y una clase 2 en cada celda de esa columna.

En el CSS de la cuadrícula hay una elipsis de la clase predefinida que permite unir puntos suspensivos a una fila en particular. También esto funcionará en Firefox también.

Answer 2

Probablemente necesite usar la propiedad classes para la columna correspondiente.

No estoy seguro de que sea lo que necesita porque escribió sobre la clase FormElement existente en formulario. En el caso, debe utilizar beforeShowForm devolución de llamada de la edición del formulario, por ejemplo, para agregar una clase al campo de entrada del campo correspondiente del formulario de edición. La identificación de los campos en el formulario es la misma que la propiedad name de la columna correspondiente de colModel.

Si realmente necesita agregar un atributo de clase a las celdas de una columna, tiene una posibilidad más: definir cellattr devolución de llamada para la columna de colModel. El camino podría ser práctico si necesita agregar la clase no para todas las celdas de la columna. Puede probar algunas condiciones en función del contenido de la fila y establecer la clase solo si la condición tiene lugar. Por ejemplo, el uso de classes:'ui-state-error-text ui-state-error' establecerá las dos clases correspondientes (ui-state-error-text y ui-state-error) en todas las celdas en la columna. Por otro lado la función de devolución de llamada

cellattr: function(rowId, val, rawObject) { 
    if (parseFloat(val) > 200) { 
     return " class='ui-state-error-text ui-state-error'"; 
    } 
} 

le permite establecer la clase sólo si el valor de la celda es mayor que 200. No utilicé rawObject en la devolución de llamada arriba y lo que se podría eliminar el parámetro opcional. Lo agregué en la devolución de llamada solo para recordarle que uno puede usar el parámetro para acceder a los valores de otras columnas de la fila. Entonces puede implementar escenarios aún más complejos en cellattr.

Como resultado se puede obtener la red como en la siguiente imagen:

ACTUALIZADO: Si es necesario agregar class en el campo de entrada de la edición de huecograbado se puede, además, utilizar dataInit devolución de llamada de editoptions. En el caso, el uso será muy simple. Usted puede hacer, por ejemplo, lo siguiente:

editoptions: { 
    dataInit: function (domElem) { 
     $(domElem).addClass("ui-state-highlight"); 
    } 
} 

Como resultado obtendrá el formulario de edición como

La demostración se puede encontrar here.