¿Cómo puedo cambiar el color de fondo de una celda en un formateador personalizado jqgrid?

Puedo cambiar el color del texto haciendo esto en el formateador personalizado jqgrid:

function YNFormatter(cellvalue, options, rowObject) { var color = (cellvalue == "Y") ? "green" : "red"; var cellHtml = "" + cellvalue + ""; return cellHtml; } 

pero ahora quiero cambiar el color de fondo de la celda completa (en lugar del color del texto).

es posible?

Si desea usar el elemento dentro del formateador de celda personalizado, puede regresar desde el formateador personalizado

 return '' + cellvalue + ''; 

donde el estilo de span.cellWithoutBackground se puede definir, por ejemplo, como siguiente

 span.cellWithoutBackground { display:block; background-image:none; margin-right:-2px; margin-left:-2px; height:14px; padding:4px; } 

Cómo funciona, puedes verlo en vivo aquí : enter image description here

ACTUALIZADO: La respuesta es vieja. La mejor práctica sería usar la callback colModel en colModel en lugar de los formateadores personalizados de uso. El cambio del color de fondo de la celda en general solo asigna class atributo de style o class a las celdas de la columna (elementos

). La cellattr llamada cellattr definida en la columna de colModel permite exactamente hacer esto. Todavía se pueden usar formateadores predefinidos como el formatter: "checkbox" , formatter: "currency" , formatter: "date" etc., pero aún así cambiar el color de fondo en la columna. Del mismo modo, la rowattr llamada rowattr , que se puede definir como la opción jqGrid (fuera de la columna específica de colModel ), permite asignar estilo / clase de toda la fila (elementos

).

Puede encontrar más información sobre cellattr aquí y aquí , por ejemplo. Otra respuesta explica rowattr .

Aquí esta lo que hice:

 jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price', width:60, align:"center", editable: true, formatter:myFmatter}, ... ], afterInsertRow: function(rowId, data) { $("#grid_id").setCell(rowId, 'price', '', {'background-color':'#' + data.colorHEX}); } ... }); 

aquí

 $("#cell").setCell(Row , Column, Value, { background: '#888888'}); 

En realidad, ni siquiera necesitará formateador personalizado, si solo tiene la intención de hacerlo para configurar los colores. Incluso puedes establecer un valor de color desde aquí, como

 var color = (Value == "Y") ? "green" : "red"; $("#cell").setCell(Row , Column, Value, { background: '#888888', color: color}); 

Feliz Codificación.

    Intereting Posts