2011-02-09 75 views
16

utilizo la siguiente línea en el $ ready (documento) (¿Cómo cambiar el color de la celda jqGrid?

$("#stSearchTermsGrid").setCell(2, 2, '', {color:'red'}) ; 

pero no funciona. ¿Me escribo de una manera incorrecta o que lo situó en el lugar equivocado.

Sé que esta pregunta se ha formulado más de una vez y así es como obtuve la primera línea. Pero todavía no puedo hacerlo y no sé dónde está el problema.

+0

Actualicé mi respuesta un poco para usar ambos estilos 'ui-state-error ui-state-error-text' juntos en lugar de solo 'ui-state-error-text' antes. – Oleg

+0

¿Qué sucede si quiero cambiar el CSS de la forma de agregar/editar de jqgrid? –

Respuesta

45

Tienes razón, no eres el primero persona que hace la pregunta. Para borrar la situación con el color de la celda que hice the demo

enter image description here

para usted que cambian el color del texto de la celda o el color de fondo de la venta de diferentes maneras:

loadComplete: function() { 
    // 2 is zero-base index of the column 'name' ('Client'). Every from the options 
    // multiselect:true, rownumbers:true and subGrid:true will increase 
    // the index by 1 because the option inserts additional columns 
    $("#6 td:eq(2)", grid[0]).css({color:'red'}); 

    grid.jqGrid('setCell',"12","name","",{color:'red'}); 
    grid.jqGrid('setCell',"10",'name', '', 'my-highlight'); 
    grid.jqGrid('setCell',"8",'name', '', 'ui-state-error ui-state-error-text'); 

    grid.jqGrid('setCell',"4","name","",{'background-color':'yellow', 
             'background-image':'none'}); 
    grid.jqGrid('setCell',"3","name","",'ui-state-highlight'); 
} 

donde

<style type="text/css"> 
    .my-highlight { color: red; } 
</style> 

y "3", " 4 "," 6 "," 8 "," 10 "y" 12 "son el hilera de las filas donde se cambiará el color de la columna correspondiente.

Por cierto, mis favoritos personales son las formas en que se usan las clases 'ui-state-highlight' o 'ui-state-error ui-state-error-text' que forman parte del jQuery UI Themes.

ACTUALIZADO: Para entender la diferencia del uso de diferentes métodos en el caso de la utilización de otro tema jQuery UI añadí one more demo utilizado temático La rana en la misma mesa que arriba se ve como el siguiente:

enter image description here

+2

¡buena respuesta dada por usted! – sanghavi7

+0

@ ankit5607san: ¡De nada! La versión actual de jqGrid admite 'cellattr' (ver [la respuesta] (http://stackoverflow.com/a/7408355/315935) y [este] (http://stackoverflow.com/a/12180842/315935)) que es más recomendable como el uso de 'setCell' dentro de' loadComplete'. – Oleg

+0

@Oleg: Esto es fantástico. Pero, quiero cambiar CSS para todas las celdas de una columna cuyo nombre e índice tengo. –

Cuestiones relacionadas