#Grails – gui:dataTable con imágenes
Tenemos un proyecto grails, en el que estamos utilizando, como no, los plugins yui y grails-ui. Nos disponemos a implementar las típicas pantallas de administración en las que se gestionan recursos de una aplicación de forma que se dan de alta, de baja, se modifican, se insertan, se borran… A la hora de mostrar los listados, una manera fácil y rápida de hacerlo es utilizando las gui:dataTables con las que con sólo una closure de un controller y una gsp muy sencilla, tenemos un listado paginado de los objetos de una clase del dominio. Por ejemplo:
Clase del dominio:
Y este es el resultado: ... pero la forma de mostrar el estado... es un poco cutre, quedaría mejor con una imagen que refleje el estado. El problema es que si intentamos buscar como insertar una imagen en un gui:dataTable, casi no encontramos nada, más bien, parece que no se puede hacer y cuando en un principio pensaba que tenía que recurrir a lo que hay por debajo, es decir, yui:dataTable, probé lo más tonto: poner en la lista que me defino en el contralador, en lugar del valor del estado, un tag <img> con la url de la imagen que quiero mostrar en función del estado que me venga:
</code></code>
class Person {
String name
Integer age
String state
static constraints = {
}
Controlador: </span></span>
<span style="font-family: -webkit-monospace"> </span>def listPersonsAsJSON = {
def personList = Person.list(params)
response.setHeader("Cache-Control", "no-store")
def list = personList.collect {
[
id: it.id,
name: it.name,
age: it.age,
state: it.state,
dataUrl: g.createLink(action: 'show') + "/$it.id"
]
}
def data = [
totalRecords: Person.count(),
results: list
]
render data as JSON
}
gsp:
<gui:dataTable</code></code>
draggableColumns="true"
id="listPersons"
columnDefs="[
[key:'id', sortable:true, resizeable: true, label:'ID'],
[key:'name', sortable:true, resizeable: true, label:'NAME'],
[key:'age', sortable:true, resizeable: true, label: 'AGE'],
[key:'state', sortable:true, resizeable: true, label: 'STATE']
]"
sortedBy="name"
controller="person" action="listPersonsAsJSON"
paginate="true"
rowClickNavigation="true"
rowsPerPage="5"
/>
def list = personList.collect {
def state=""
if(it.state=="Y"){
state="img src='${createLinkTo(dir:'images',file:'accept.png')}'/"
}else{
state="img src='${createLinkTo(dir:'images',file:'delete.png')}'/"
}
[
id: it.id,
name: it.name,
age: it.age,
state:state,
dataUrl: g.createLink(action: 'show') + "/$it.id"
]
}
facilísimo
