Posts Tagged 'tabla'

TIP HTML: Tabla scrollable con columnas y filas fijas

En el proyecto en el que estoy trabajando, el mismo que a duras penas me deja tiempo para blogear, tengo como requerimiento mostrar una tabla HTML con la cabecera y la columna izquierda fijas, de tal modo que el resto de la tabla sea “scrollable”. Algo de este tipo:

tabla

Siguiendo mi política de no reinventar la rueda, he estado investigando el mejor modo de hacerlo y he encontrado dos soluciones un tanto artificiosas pero apañadas:

  1. http://www.cubido.at/Default.aspx?tabid=176&EntryID=8
  2. http://saloon.javaranch.com/cgi-bin/ubb/ultimatebb.cgi?ubb=get_topic&f=20&t=009273

Tras probar ambas y alguna otra aproximación, finalmente he optado por la segunda opción dado que apenas requiere de Javascript y funciona tanto en Firefox como en Explorer.

Sustituir DisplayTag por JMESA

Son muchos los proyectos que usan DisplayTag para la creación de tablas con paginación y exportación automática. Es un taglib muy últil que ahorra mucho tiempo y líneas de código a un programador. En mi opinión se ha quedado un poco deprecated. Afortunadamente existe una alternativa más moderna y potente llamada jMesa.

A continuación muestro los pasos a seguir para sustituir DisplayTag por Jmesa:

Descargo jMesa de la aquí.

Añado la tld que se encuentra bajo el directorio /jmesa-2.3.3/dist del zip al directorio /WEB-INF/tld de mi aplicación.

También añado los ficheros css, javascript, las imágenes y por supuesto los jar en sus directorios correspondientes. Como jMesa requiere de JQuery también lo añado al directorio al directorio js (la versión de producción la puedes obtener aquí). No importa donde se coloquen los css ni los javascript dado que se referencian posteriormente a mano. Las imágenes sin embargo tienen que estar en una ruta determinada que ha de coincidir con la del valor de la clave html.imagesPath especificada en el fichero jmesa.properties.

Este último fichero hay que crearlo y referenciarlo desde el web.xml así que, primero lo referencio:

  <context-param>
<param-name>jmesaPreferencesLocation</param-name>
<param-value>WEB-INF/jmesa.properties</param-value>
</context-param>

Y luego lo creo en el directorio WEB-INF de la aplicación. Tiene esta pinta:

html.table.component.theme=jmesa
html.table.renderer.styleClass=table

html.row.renderer.highlightClass=highlight
html.row.renderer.evenClass=even
html.row.renderer.oddClass=odd

html.column.header.renderer.image.sortAsc=sortAsc.gif
html.column.header.renderer.image.sortDesc=sortDesc.gif
html.column.filter.renderer.image.droplistHandle=droplistHandle.gif

html.tbodyClass=tbody
html.titleClass=title
html.filterClass=filter
html.headerClass=header
html.toolbarClass=toolbar
html.statusBarClass=statusBar
html.imagesPath=/images/table/
html.rowcount.includePagination=false

html.toolbar.maxRowsDroplist.increments=15,50,100

html.toolbar.image.csv=csv.png
html.toolbar.image.pdf=pdf.gif
html.toolbar.image.excel=excel.gif
html.toolbar.image.clear=clear.png
html.toolbar.image.firstPage=firstPage.png
html.toolbar.image.firstPageDisabled=firstPageDisabled.png
html.toolbar.image.lastPage=lastPage.png
html.toolbar.image.lastPageDisabled=lastPageDisabled.png
html.toolbar.image.nextPage=nextPage.png
html.toolbar.image.nextPageDisabled=nextPageDisabled.png
html.toolbar.image.prevPage=prevPage.png
html.toolbar.image.prevPageDisabled=prevPageDisabled.png
html.toolbar.image.filter=filter.png
html.toolbar.image.separator=separator.gif

Ya esta configurado. Se puede usar de muchas maneras todas muy bien documentadas en la página oficial. Como mi idea es sustituir el DisplayTag del modo más rápido e indoloro posible tan sólo he de sustituir el tag usado antes por uno similar donde lo que voy a iterar en cada fila es un item de lista de objetos. Es exactamente lo mismo que se hace con DisplayTag con lo que no he de cambiar para nada el controlador.


<jmesa:tableFacade
        id="tag"
        items="${listaObjetos}"
        var="bean"
        >
        <jmesa:htmlTable>
            <jmesa:htmlRow>
                <jmesa:htmlColumn property="nombre"/>
                <jmesa:htmlColumn property="descripcion" title="Descripción"/>

            </jmesa:htmlRow>
        </jmesa:htmlTable>
    </jmesa:tableFacade>

En el ejemplo cada objeto tiene un atributo nombre y un atributo descripción, se mostrará cada uno en una columna.

No hay que olvidar cambiar en namespace de displaytag por el de Jmesa:


<%@ taglib uri="/WEB-INF/tld/jmesa.tld" prefix="jmesa" %>


Add to Technorati Favorites
Clicky Web Analytics Clicky

Flickr Photos