En esta demostración, estamos usando una cuadrícula interactiva de la tabla empleados para colorear las filas de la cuadrícula según la acción del usuario antes de guardar las operaciones.
Por ejemplo, si agrega una fila que se pinte de un color. Si realiza una modificación a una fila se pinte de otro color y si realiza una eliminación que se pinte de otro color.
Eso ayuda a que antes de que el usuario haga clic en el botón guardar pueda ver las operaciones realizadas en la grilla y darse cuenta visualmente cuantas operaciones de nuevas filas tiene, cuantas modificaciones y cuantas eliminaciones.
Veamos el ejemplo, usando la tabla EMP.
Ingresamos el identificador estático en la grilla interactiva como: igemp.
Colocamos en propiedades de la página en CSS Inline:
#igemp .a-GV-row.is-inserted .a-GV-cell {
background-color: #A7EC5A;
}
#igemp .a-GV-row.is-updated .a-GV-cell {
background-color: #6AECF5;
}
#igemp .a-GV-row.is-deleted .a-GV-cell {
background-color: #F5B3C9;
}
Podemos agregar estilos a todas las filas con la clase a-GV-row y las clases is-selected, is-hover, is-active, is-focused, is-deleted, is-inserted, is-updated, y is-error state modifier.
Además, podemos agregar estilos a celdas con una clase a-GV-cell y las clases is-changed, is-error state modifier.
Por ejemplo, con el CSS anterior al agregar una fila se pinta la fila de color verde:
Si editamos una fila, la fila se pinta de celeste:
Si suprimimos una fila se pinta de rosado:
También tenemos la forma de utilizar tabla (table) y filas (tr) en el CSS:
.a-GV-table tr.is-inserted .a-GV-cell {
background-color: #A7EC5A;
}
.a-GV-table tr.is-updated .a-GV-cell {
background-color: #6AECF5;
}
.a-GV-table tr.is-deleted .a-GV-cell {
background-color: #F5B3C9;
}
Trabaja de la misma manera:
Espero sea de utilidad!