UDA-Componentes RUP. Tabla (v2.1.1 deprecado)

UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-
NoComercial-CompartirIgual 3.0 Unported License.
UDA - Utilidades de Desarrollo de Aplicaciones
Componente RUP – Tabla
Fecha: 09/01/2013 Referencia:
EJIE S.A.
Mediterráneo, 14
Tel. 945 01 73 00*
Fax. 945 01 73 01
01010 Vitoria-Gasteiz
Posta-kutxatila / Apartado: 809
01080 Vitoria-Gasteiz
www.ejie.es

Componentes RUP – Tabla ii/25
Control de documentación
Título de documento: Componentes RUP – Tabla
Histórico de versiones
Código: Versión: Fecha: Resumen de cambios:
1.0.0 06/06/2011 Primera versión.
1.0.1 25/06/2011
Correcciones en las propiedades de
configuración del componente.
1.0.2 18/07/2011
Actualización de las capturas de pantalla. Se han
completado las descripciones de las propiedades
de configuración del componente.
1.1.0 14/09/2011
Actualización de las versiones de las librerías
JavaScript subyacentes.
Añadido el apartado Integración con UDA.
1.2.1 22/02/2012
Inclusión de gestión de eventos.
Diseño líquido (parámetro: fluidBaseLayer).
2.0.0 11/07/2012
Nuevos métodos públicos.
Ajustes necesarios para adaptarse a las nuevas
funcionalidades de la versión v2.0.0.
2.1.0 18/09/2012
Actualización de las versiones de las librerías
JavaScript subyacentes.
2.1.1 09/01/2013
Nuevas propiedades de configuración del
componente: fluidOffset, minWidth, maxWidth,
tooltipDelay.
Modificación de estilos para colorear líneas pares
o impares (establecer por defecto).
Cambios producidos desde la última versión
Nuevas propiedades de configuración del componente: fluidOffset, minWidth, maxWidth,
tooltipDelay. Modificación de estilos para colorear líneas pares o impares (establecer por
defecto).
Control de difusión

Componentes RUP – Tabla iii/25
Responsable: Ander Martínez
Aprobado por:
Firma: Fecha:
Distribución:
Referencias de archivo
Autor:
Nombre archivo:
Localización:

Componentes RUP – Tabla iv/25
Contenido
Capítulo/sección Página
1. Introducción 5
2. Ejemplo 5
3. Casos de uso 5
4. Infraestructura 6
4.1. Ficheros 6
4.2. Dependencias 6
5. Invocación 7
6. Definición del componente 9
6.1. Propiedades 9
6.2. Propiedades del colModel 13
6.3. Métodos 15
6.4. Eventos 16
7. Sobreescritura del theme 18
8. Internacionalización (i18n) 19
9. Integración con UDA 24

Componentes RUP – Tabla 5/25
1. Introducción
La descripción del componente Tabla visto desde el punto de vista de RUP es la siguiente:
Se les presenta a los usuarios los datos tabulados para que la información se visualice de manera ágil y
rápida, facilitando así su comprensión y manejo.
2. Ejemplo
Se muestra a continuación una maquetación típica del componente:
3. Casos de uso
Se aconseja la utilización de este componente:
• Cuando se tenga que presentar a los usuarios filas de datos y se desee facilitar la búsqueda de
datos.

4. Infraestructura
A continuación se comenta la infraestructura necesaria para el correcto funcionamiento del componente.
Únicamente se requiere la inclusión de los ficheros que implementan el componente (js y css) comentados
en los apartados Ficheros y Dependencias.
4.1. Ficheros
Ruta Javascript: rup/scripts/
Fichero de plugin: rup.grid-x.y.z.js
Ruta theme: rup/basic-theme/
Fichero de estilos: theme.grid-x.y.z.css (modificable por el desarrollador) y ui.jqgrid.css (fichero base
de los estilos de la tabla)
Ruta fichero de recursos: rup/resources/rup.i18n_idioma.json
4.2. Dependencias
El desarrollo de los patrones como plugins basados en la librería JavaScript jQuery hace necesaria la
inclusión de esta dependencia. La versión elegida para el desarrollo ha sido la versión 1.8.0. Un posible
cambio de versión podría no ser trivial y la versión utilizada no debe seleccionarse arbitrariamente. La
razón es que el cambio podría provocar errores de funcionamiento e incompatibilidad tanto con los
propios patrones como con algunos plugins basados en jQuery.
• jQuery 1.8.0: http://jquery.com/
La gestión de ciertas partes visuales de los patrones, se han realizado mediante el plugin jQuery UI que
se basa en jQuery y se utiliza para construir aplicaciones web altamente interactivas. Este plugin
proporciona abstracciones de bajo nivel de interacción y animación, efectos avanzados de alto nivel,
componentes personalizables (estilos) ente otros. La versión utilizada en el desarrollo ha sido la 1.8.23
• jQuery UI 1.8.23: http://jqueryui.com/
Los ficheros necesarios para el correcto funcionamiento del componente son:
• jquery-1.8.0.js
• jquery-ui-1.8.23.custom.js
• rup.base-x.y.z.js
• rup.grid-x.y.z.js
• jQGrid 4.4.0: http://www.trirand.com/blog/
• Ejemplos online: http://www.trirand.com/blog/jqgrid/jqgrid.html

5. Invocación
El componente tabla se invocará mediante un selector de jQuery que indicará el elemento sobre el que se va
a aplicar. Por ejemplo:
$("#id_elemento").rup_grid(properties);
donde el parámetro “properties” es un objeto ( var properties = {}; ) o bien directamente la declaración de lo
valores directamente. Sus posibles valores se detallan en el siguiente apartado.
El componente se aplica sobre un elemento table a partir del cual se generarán las estructuras necesarias
para el funcionamiento del mismo, de acuerdo a las propiedades de configuración especificadas. Un ejemplo
de utilización del componente sería el siguiente:
1. Se define el elemento table sobre el que se va a aplicar el componente.
<table id="grid_usuarios" cellpadding="0" cellspacing="0">
<tbody><tr><td> </td></tr></tbody>
</table>
2. Se define la capa que va a contener los controles de la paginación.
<div id="pager"></div>
3. Se invoca el componente.
$("#grid_usuarios").rup_grid({
url:"../patrones/usuario",
width: 650,
pagerName:"pager",
colNames:[
$.rup.i18n.app.grid_usuarios.id,
$.rup.i18n.app.grid_usuarios.nombre,
$.rup.i18n.app.grid_usuarios.apellido1,
$.rup.i18n.app.grid_usuarios.apellido2,
$.rup.i18n.app.grid_usuarios.ejie,
$.rup.i18n.app.grid_usuarios.fechaAlta,
$.rup.i18n.app.grid_usuarios.fechaBaja
],
colModel: [
{ name: "id", index: "id" },
{ name: "nombre", index: "nombre" },
{ name: "apellido1", index: "apellido1" },
{ name: "apellido2", index: "apellido2" },
{ name: "ejie", index: "ejie",
editoptions: {
defaultValue:"0",
value:{"1":"Sí","0":"No"}
},
formatter:"select"

},
{ name: "fechaAlta", index: "fechaAlta" },
{ name: "fechaBaja", index: "fechaBaja" }
]
});

6. Definición del componente
6.1. Propiedades
Para poder definir una tabla se deberán rellenar las siguientes propiedades del componente
adecuándolo según sus necesidades:
• loadOnStartUp: Indica si se cargará la tabla a la hora de crearlo o se deberá invocar al reloadGrid
para cargarlos.
• hasMaint: (Por defecto a false) Propiedad exclusiva cuando se usa la tabla con el mantenimiento, la
cual deberá estar a true para que el mantenimiento sea capaz de cargar la tabla haciendo uso del
formulario de búsqueda.
• autoencode: Todas las peticiones y envíos de datos se realizan encodeadas.
• autowidth: Establece si la anchura de la tabla es automática (sumando cada una de las
propiedades width de las columnas).
• caption: Establece un título a la tabla. Esta propiedad esta deshabilitada por defecto puesto que las
tablas no tienen cabecera.
• cellLayout: Establece las propiedades “padding” y “border” de las celdas. Por defecto está a 5.
• cellEdit: Habilita o deshabilita la edición en las celdas.
• cellsubmit: Determina si el guardar los datos de la celda se hace de manera local “clientArray” o de
forma remota “remote”.
• cellurl: En caso de que la opción de guardar los datos se haga de manera remota (cellsubmit =
remote), este parámetro indica la url donde se lanzarán las peticiones.
• colModel: Establece el modelo de las filas definiendo el ancho y el índice de cada una de las
columnas.
• colNames: Establece el nombre de las columnas. Es el texto que aparece en la cabecera de cada
columna de la tabla.
• datatype: Define el formato de los datos que se le pasan a la tabla. A continuación se definen los
diferentes tipos:
o JSON: Opción por defecto. Los datos se pasan en formato JSON.
o Xmlstring: Origen de datos en una variable local en formato XML.
o JsonString: Origen de datos en una variable local con unJSON formateado en forma de
string.
o XML: Origen de datos en XML

o local o clientSide: Origen de datos en una variable local.
o script: Origen de datos en un código javascript.
o function(): Origen de datos devuelto por una función.
o deselectAfterSor: Solo aplicable cuando el tipo de datos sea local. Deselecciona la fila
después de hacer una ordenación.
• datastr: En caso que la propiedad datatype sea xmlstring o jsonstring, define el string de datos para
formar la tabla.
• direction: Indica la dirección del texto en la tabla:
o Rtl : Indica de derecha a izquierda
o Ltr: Indica de izquierda a derecha (Opción por defecto)
• editurl: Url para guardar los datos en caso de que la tabla sea editable.
• emptyrecords: Mensaje que se visualiza cuando la llamada a una tabla no devuelve ningún dato.
• expandColClick: Indica si se expande o contrae la columna haciendo un clic en la misma.
• expandColumn: Indica la columna que se expande o contrae cuando se redimensiona la tabla.
• fluidOffset: Desfase de anchura que se aplica en el diseño líquido respecto de la capa contenedora.
• forceFit: Indica si se fuerza a la tabla a visualizarse en cierta zona de pantalla haciendo que las
columnas se contraigan o expandan a tal efecto.
• gridstate: Determina el estado de la tabla:
o visible: Si está visible
o hidden: Si está oculto
• height: Indica la altura del gris.
• hiddengrid: Si esta propiedad se informa a true, la tabla no se carga ni visualiza hasta hacer un
show. Útil cuando la carga de la tabla se hace bajo demanda.
• hidegrid: Habilita o deshabilita la opción de ocultar la tabla mediante un botón.
• hoverrows: Habilita o deshabilita la opción de resaltar el contenido de las filas al pasar por encima
con el ratón.
• jsonReader: Un array que indica la estructura de los datos json que se espera.
• lastpage: Devuelve el número de páginas que devuelve la consulta para rellenar la tabla.
• lastsort: Devuelve el índice de la columna por el que se está haciendo la ordenación.

• loadonce: Indica si la tabla se carga una sola vez o no.
• loadtext: Indica el texto que aparece mientras se está cargando la tabla. Por defecto, la arquitectura
deshabilita este texto puesto que para ello se introduce el control de espera.
• minWidth: Límite mínimo de anchura que se tendrá en cuenta a la hora de aplicar el diseño líquido.
• maxWidth: Límite máximo de anchura que se tendrá en cuenta a la hora de aplicar el diseño
líquido.
• mtype: Define si las llamadas AJAX que se lanzan son de tipo POST o GET.
• multikey: Si la tabla está en modo multiselección, define si se pueden utilizar las teclas CONTROL,
ALT o SHIFT para la selección de los registros similar al comportamiento de Windows en la
selección de ficheros.
• multiboxonly: Indica si en el modo multiselección se podrá seleccionar la fila únicamente haciendo
clic en el check que introduce de forma automática, o en cualquier punto de la fila.
• multiselect: Indica si la tabla está en modo multiselección o no.
• multiselectWidth: Determina la anchura de la columna del check cuando la tabla está en modo
multiselección.
• page: Indica el número de registros al hacer la paginación.
• pagerInline: Determina si la barra de paginación se debe de mostrar en una línea o en dos. Por
defecto true.
• pagerName: Indica el elemento HTML que contiene la paginación de resultados de la tabla.
• pagerpos: Indica la posición del elemento de paginación.
• prmNames: Indica el nombre de los parámetros que se pasan en cada una de las llamadas que
hace la tabla. Estos valores por defecto son los siguientes:
o page: Indica la página actual
o rows: Indica el número de líneas a devolver
o sort: Indica el índice de la columna por el que hacer la ordenación
o order: Indica si la ordenación es ascendente o descendente
• postData: El array de información que se envía al servidor en cada una de las peticiones que se
realizan. Es el método recomendado para enviar parámetros extra al servidor. Un ejemplo sería el
siguiente:
$(“#grid_usuarios”).rup_grid({
…
postData:{filterParam:’1’}, });
• recordpos: Determina la posición del número de registros en la capa de paginación.

• records: Devuelve el número de registros de la tabla.
• recordtext: Determina el texto a visualizar en el número de elementos de la tabla.
• resizeclass: Define un class diferente para las columnas que puedan ser redimensionadas.
• rownumbers: Si se define la propiedad aparece una nueva columna en la tabla indicando el número
de línea en cada fila.
• rowNum: Define el número de elementos en cada página de la tabla.
• rownumWidth: Indica la anchura de la columna si rownumbers = true.
• scroll: Indica si poner o no scroll a la tabla.
• scrollOffset: Indica la anchura de la nueva columna de scroll.
• selarrrow: Devuelve un array con los números de filas seleccionados si la tabla es multiselección.
• selrow: Devuelve el número de fila seleccionada.
• shrinkToFit: Define si la tabla debería de contraerse para encajar en la anchura definida en la
propiedad width.
• sortable: Indica si la tabla es ordenable o no.
• sortname: Indica el nombre de la columna por el que ordenar la primera vez que se carga la tabla.
• sortorder: Indica el orden (ascendente o descendente) de la columna por la que ordenar la tabla en
su primera carga.
• tooltipDelay: Tiempo de espera en milisegundos que se demorará la visualización de los tooltip de
ayuda. Valor por defecto 500.
• totaltime: Devuelve el tiempo total que tarda la tabla en cargarse.
• url: Define la url a través de la cual se carga la tabla.
• viewrecords: Indica si se visualizan el número de registros totales de la tabla.
• viewsortcols: Indica si se visualizan o no las imágenes en las cabeceras de las columnas para
realizar la ordenación de la tabla.
• width: Define la anchura de la tabla. En caso de especificarse el valor auto, se aplicará un diseño
líquido. Valor por defecto auto.
• xmlReader: AL igual que el jsonReader define el array con la estructura de los datos xml que se
espera.
• fluidBaseLayer: (Por defecto null) Parámetro que determina el id de la capa padre que determinara
las dimensiones de la tabla. En caso de que esta capa cambie, siguiendo el modelo de diseño
liquido, la tabla se redimensionará ajustándose a las nuevas medidas de la capa que la contiene. En

caso de no especificarse valor alguno o especificarse un valor null, la tabla no se redimensionará
(no se comportara con diseño liquido).
Todas estas propiedades pueden ser consultadas / actualizadas con los métodos getGridParam y
setGridParam del componente de la siguiente forma.
$(selector).rup_grid(“setGridParam”,parametro);
var p = $(selector).rup_grid(“getGridParam”,parametro);
donde “parámetro” es la propiedad que se quiere obtener o establecer.
El siguiente es un ejemplo utilizando este API del componente:
$(“#grid_usuarios”).rup_grid(“getGridParam”, “width”) nos devuelve el ancho de la tabla.
$(“#grid_usuarios”).rup_grid(“setGridParam”, “width: 150”) actualiza la anchura de la tabla a 150.
6.2. Propiedades del colModel
De la misma forma, también se ha hablado del elemento/propiedad colmodel, que se establece en las
columnas: Las posibles propiedades para el colModel son las siguientes:
• align: Establece la alineación para dicha columna.
• classes: Establece el nombre de la clase de la hoja de estilos a aplicar a dicha columna.
• datefmt: Determina el formato de la columna en caso de ser una fecha (dd/MM/yyyy).
• editable: Establece si esa columna es editable o no.
• editoptions. Establece las opciones de edición de la columna.
• editRules: Se establecen las reglas de edición de cada columna.
o valídate: (por defecto false) Indica si esta columna será validable de forma individual o no
(se tendrá que tener en cuenta que esta propiedad solo vale para cuando se utiliza el
componente tabla dentro del componente mantenimiento, ya que se usa una propiedad del
mismo (validationMode) para realizar las validaciones).
o required: Indica si el campo es requerido.
• edittypes: Indica el tipo de elemento que se forma al poner la columna en modo edición. Los
posibles valores son:
o text: Construye un campo de texto.

o textarea: Construye un textarea.
o select: Construye una combo.
o checkbox: Construye un check.
o password: Construye un campo para introducir claves.
o button: Introduce un botón.
o image: Introduce una imagen.
o file: Introduce un campo de tipo fichero
o hidden: Introduce un campo de tipo hidden.
• fixed: Columna que no se redimensiona cuando se redimensiona la tabla.
• formatter: Indica el formato a aplicar al visualizar la columna. Por defecto existen los siguientes y
pueden ser personalizados a su vez:
o integer: Campo entero.
o number: Campo numérico.
o currency: Campo de tipo moneda.
o date: Campo de tipo fecha.
o email: Campo de tipo dirección de correo electrónico.
o link: Campo de tipo link.
o showlink. Campo que muestra el contenido de un link.
o checkbox. Campo de tipo checkbox.
o select. Campo de tipo combo.
o predefinido: Es posible también crearse nuevos formatters en caso de que el requerimiento
funcional no se cumpla con los formatters por defecto. A continuación se explica un ejemplo:
masiveIconFormatter = function(cellval, el, opts) {
var url = “”; // dirección de correo
if (cellval && cellval != ''){
html = '<img src='+url+' width="16" height="16">';
}
return html;
}
• hidden: Indica si la columna es oculta o no.

• Index: Indica el índice de la columna.
• jsonmap: Define el mapeo entre la columna json y la columna.
• label. Si no se introduce el colnames, determina el texto que aparece en la cabecera de la columna.
• name: El nombre de la columna
• resizable: Indica si la columna es redimensionable o no.
• sortable. Indica si la columna es ordenable o no.
• width: Define la anchura de la columna.
• xmlmap: Define el mapeo entre la columna del xml y la columna.
• unformat: Define el nuevo formato cuando una columna deja de ser editable.
6.3. Métodos
Como se puede ver en el ejemplo anterior, el API a utilizar para realizar las invocaciones a los métodos
públicos de los que dispone el componente es:
$("#GRID_persona").rup_grid("setRowData", selRows[0], properties);
$(selector).rup_grid(metodo, [parametros]);
Se ha seguido el mismo formato que usa jQuery UI: el primer parámetro es el método que se quiere
invocar y el resto de parámetros, la parametrización que recibe el método.
Los métodos públicos a disposición del desarrollador para ser invocados son los siguientes:
• addRowData (rowid, data, position, srcrowid): Añade la información contenida en data en la fila
rowid.
• clearGridData: Limpia todos los registros de la tabla.
• delRowData (rowid): Borra la información del registro en la posición rowid.
• getDataIDs. Devuelve todos los identificativos de cada fila de la tabla. Es decir, en nuestro caso,
devuelve la información de todas las claves primarias en formato array de la tabla.
• getGridParam (name). Método muy importante que devuelve una propiedad de la tabla comentada
anteriormente.
• getRowData (rowid). Devuelve una estructura con todos los datos de la fila indicada en rowid.
• setGridParam (object). Establece una propiedad de la tabla en formato (nombre: valor).
• setRowData (rowid, data, cssprop). Actualiza el valor de la fila “rowid” con la información que se
define en “data” y los estilos declarados en “cssprop”.

• setSelection (rowid, onselectrow). Selecciona la fila especificada en rowid y posibilita introducir una
función para manejar el evento de cada vez que se selecciona la fila.
• resetSelection. En una tabla multiseleccionable deselecciona todos los seleccionados y cuando es
simple deselecciona el seleccionado.
• reloadGrid (callbackFnc, param). Actualiza la tabla con los parámetros actuales. El método acepta
especificar una función de callback y un parámetro para que sea ejecutada al finalizar la recarga de
la tabla.
• getSelectedRows: Método que devuelve un array con los elementos seleccionados, comprobando
si es multiselección o no.
• getColModel: Método que devuelve el colModel completo, se podría utilizar el método
getGridParam(“colModel”) para ello también.
• GridToForm (rowid, formid): Método que vuelca el contenido de la fila que recibe como parámetro al
formulario que recibe como segundo parámetro, haciendo uso del atributo name para hacer la
correlación de datos.
• FormToGrid (rowid, formid, mode, position): Añade o modifica la fila seleccionada con los datos del
formulario. Rowid. Id de la fila. Formid: id del formulario con los datos. Mode: añadir o modificar.
Position: solo tiene sentido si el modo es añadir.
• isMultiselect: Función que devuelve si el mantenimiento es de tipo multi selección o no.
• getCol: Función que devuelve el valor de la celda de la fila que se le pasa como parámetro. El
colName puede ser o el índice de la columna o el nombre de la misma.
• isEditable: Función que devuelve si la tabla es editable o no.
• getEditingRowData: Función que devuelve los valores de la fila en edición, no su contenido HTML.
6.4. Eventos
Al igual que muchos otros componentes, el componente tabla dispone de una serie de eventos
asociados a su funcionamiento. A nivel de configuración, el componente expone y permite definir todos
los eventos disponibles en el plugin subyacente jqGrid. A continuación, ya que el plugin dispone de un
conjunto elevado de eventos, se precisa el flujo de ejecución que se produce durante dos de las
principales funcionalidades del componente:
Orden de ejecución de eventos en llamadas Ajax
1. beforeRequest.
2. serializeGridData.
3. loadBeforeSend.
4. loadError.

5. beforeProcessing.
6. gridComplete.
7. loadComplete.
Orden de ejecución de eventos al seleccionar una fila
1. beforeSelectRow.
2. onSelectRow.
3. onCellSelect.
Por cuestiones de adaptación y para mejorar la flexibilidad de manejo, los eventos del componente tabla
antes enumerados, aceptan dos modos de configuración diferentes. Por un lado, es posible definirlos
mediante una función que se ejecutará cuando se lanza el evento. Estas funciones específicas conviven
con las funcionalidades de base del componente y pueden interrumpir la ejecución de las mismas
retornando un valor false. Por otro lado existe la posibilidad de crear una estructura más compleja pero a
la vez más funcional.
En lugar de especificar una única función es posible especificar una estructura json que alberge un
método pre y un método post. Dichos métodos se ejecutarán antes y después de la función por defecto
asociada al componente.
loadBeforeSend : {
pre : function(xhr, settings){
console.log("pre");
console.log("xhr", xhr);
console.log("settings", settings);
}, post : function(xhr, settings){
console.log("post");
console.log("xhr", xhr);
console.log("settings", settings);
}
pre => En caso de devolver la función un false, el evento se cancela.
por defecto => En caso de que la haya, se ejecuta la función general del componente.
post => En el caso de devolver la función un false, siempre que lo acepta el evento
del plugin subyacente, se cancela el flujo de ejecución del componente.
De esta manera se podrá controlar de forma más precisa la ejecución de los eventos y se podrán
especificar acciones anteriores y posteriores a la ejecución gestionada por el componente.

7. Sobreescritura del theme
El componente tabla se presenta con una apariencia visual definida en el fichero de estilos theme.rup.grid-
x.y.z.css.
Si se quiere modificar la apariencia del componente, se recomienda redefinir el/los estilos necesarios en un
fichero de estilos propio de la aplicación situado dentro del proyecto de estáticos
(codAppStatics/WebContent/codApp/styles).
Los estilos del componente se basan en los estilos básicos de los widgets de jQuery UI, con lo que los
cambios que se realicen sobre su fichero de estilos manualmente o mediante el uso de la herramienta
Theme Roller podrán tener repercusión sobre todos los componentes que compartan esos mismos estilos
(pudiendo ser el nivel de repercusión general o ajustado a un subconjunto de componentes).
A continuación se describen los estilos sobreescribibles por parte del usuario:
• .rup-grid_evenRow: filas pares de los datos de la tabla.
• .rup-grid_oddRow: filas impares de los datos de la tabla.
• .rup-grid_cellPadding_important: espacio de las celdas con respecto a su borde.
Inicialmente la tabla muestra los colores por defecto de jQuery UI para la fila resaltada, al colocar el ratón
encima (hover) y para la fila seleccionada (o filas en multiselección). Si se desea modificar su estilo, en el
fichero del componente los siguientes estilos comentados:
• .rup-grid_evenRow:hover, rup-grid_oddRow:hover: filas resaltadas.
• .rup-grid_evenRow.ui-state-highlight,.rup-grid_oddRow.ui-state-highlight: filas seleccionadas.
Estos estilos puede indicar bien un color a utilizar de fondo como una imagen. En el caso de que se quiera
definir un color se deberá incluir el atributo “background-image” con el valor “none” para poder sobrescribir
los valores de jQuery UI, en caso contrario no se mostrará. A la hora de utilizar una imagen no existe
problema alguno.
NOTA: Los estilos que acaban en _important deberán definir su propiedades con el modificador !important
para que se puedan aplicar los estilos correctamente, aunque la recomendación es no hacer uso de
important en la medida de lo posible.

8. Internacionalización (i18n)
La gestión de los literales de la tabla se realiza a través de ficheros json lo que flexibiliza el desarrollo. Para
acceder a los literales se hará uso del objeto base RUP, mediante éste se accederá al objeto json
correspondiente según el idioma obteniendo tanto los literales como los propios mensajes.
Los literales definidos para el contenido de la tabla son texto simple. Para este componente los literales
utilizados están en la parte global de la internacionalización dentro de los resources de rup. A continuación
se muestran los literales necesarios para el componente:
"rup_grid": {
"selectedElems":"Se han seleccionado los ",
"deSelectedElems":"Se han deseleccionado los ",
"ofPage":" elementos de la página.",
"selectAll": "seleccionar los ",
"deSelectAll": "deseleccionar los ",
"selectAllRest": "restantes",
"clearSelection":"deshacer selección",
"pager": {
"selected" : "Elementos seleccionados",
"primPag" : "Primera Página",
"siguiente" : "Siguiente",
"anterior" : "Anterior",
"ultiPag" : "Última Página"
},
"noRecordsFound": "No hay registros.",
"defaults": {
"recordtext": "Mostrando {0} - {1} de {2}",
"emptyrecords": "Sin registros que mostrar",
"loadtext": "Cargando...",
"pgtext" : "Página {0} de {1}"
},
"search": {
"caption": "Búsqueda...",
"Find": "Buscar",
"Reset": "Limpiar",
"odata": [
"igual",
"no igual a",
"menor que",
"menor o igual que",
"mayor que",
"mayor o igual a",
"empiece por",
"no empiece por",
"está en",
"no está en",
"termina por",
"no termina por",
"contiene",
"no contiene"
],

"groupOps": [
{
"op": "AND",
"text": "todo"
},
{
"op": "OR",
"text": "cualquier"
}
],
"matchText": " match",
"rulesText": " reglas"
},
"edit": {
"addCaption": "Agregar registro",
"editCaption": "Modificar registro",
"bSubmit": "Guardar",
"bCancel": "Cancelar",
"bClose": "Cerrar",
"saveData": "Se han modificado los datos, ¿guardar cambios?",
"bYes": "Si",
"bNo": "No",
"bExit": "Cancelar",
"msg": {
"required": "Campo obligatorio",
"number": "Introduzca un número",
"minValue": "El valor debe ser mayor o igual a ",
"maxValue": "El valor debe ser menor o igual a ",
"email": "No es una dirección de correo válida",
"integer": "Introduzca un valor entero",
"date": "Introduza una fecha correcta ",
"url": "No es una URL válida. Prefijo requerido ('http://' or
'https://')",
"nodefined": " no está definido.",
"novalue": " valor de retorno es requerido.",
"customarray": "La función personalizada debe devolver un
array.",
"customfcheck": "La función personalizada debe estar presente en
el caso de validación personalizada."
}
},
"view": {
"caption": "Consultar registro",
"bClose": "Cerrar"
},
"del": {
"caption": "Eliminar",
"msg": "¿Desea eliminar los registros seleccionados?",
"bSubmit": "Eliminar",
"bCancel": "Cancelar"
},
"nav": {
"edittext": " ",
"edittitle": "Modificar fila seleccionada",
"addtext": " ",
"addtitle": "Agregar nueva fila",

"deltext": " ",
"deltitle": "Eliminar fila seleccionada",
"searchtext": " ",
"searchtitle": "Buscar información",
"refreshtext": "",
"refreshtitle": "Recargar datos",
"alertcap": "Aviso",
"alerttext": "Seleccione una fila",
"viewtext": "",
"viewtitle": "Ver fila seleccionada"
},
"col": {
"caption": "Mostrar/ocultar columnas",
"bSubmit": "Enviar",
"bCancel": "Cancelar"
},
"errors": {
"errcap": "Error",
"nourl": "No se ha especificado una URL",
"norecords": "No hay datos para procesar",
"model": "Las columnas de nombres son diferentes de las columnas de
modelo"
},
"formatter": {
"integer": {
"thousandsSeparator": ".",
"defaultValue": "0"
},
"number": {
"decimalSeparator": ",",
"decimalPlaces": "2",
"defaultValue": "0,00"
},
"currency": {
"decimalSeparator": ",",
"decimalPlaces": "2",
"prefix": "",
"suffix": "",
"defaultValue": "0,00"
},
"date": {
"dayNames": [
"Do",
"Lu",
"Ma",
"Mi",
"Ju",
"Vi",
"Sa",
"Domingo",
"Lunes",
"Martes",
"Miércoles",
"Jueves",

"Viernes",
"Sábado"
],
"monthNames": [
"Ene",
"Feb",
"Mar",
"Abr",
"May",
"Jun",
"Jul",
"Ago",
"Sep",
"Oct",
"Nov",
"Dic",
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio",
"Agosto",
"Septiembre",
"Octubre",
"Noviembre",
"Diciembre"
],
"AmPm" : [
"am",
"pm",
"AM",
"PM"
],
"S": "function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd',
'th'][Math.min((j - 1) % 10, 3)] : 'th'}",
"srcformat": "Y-m-d",
"newformat": "d-m-Y",
"masks": {
"ISO8601Long": "Y-m-d H:i:s",
"ISO8601Short": "Y-m-d",
"ShortDate": "n/j/Y",
"LongDate": "l, F d, Y",
"FullDateTime": "l, F d, Y g:i:s A",
"MonthDay": "F d",
"ShortTime": "g:i A",
"LongTime": "g:i:s A",
"SortableDateTime": "Y-m-dTH:i:s",
"UniversalSortableDateTime": "Y-m-d H:i:sO",
"YearMonth": "F, Y"
},
"reformatAfterEdit": false
},
"baseLinkUrl": "",
"showAction": "",

"target": "",
"checkbox": {
"disabled": "true"
},
"idName": "id"
}
}
El acceso a cualquier tipo de literal se debe realizar de la siguiente forma (teniendo en cuenta que es un
objeto json):
$.rup.i18n.rup_grid.#literal#

9. Integración con UDA
Para la obtención de los datos que el componente tabla debe visualizar, se realiza una petición AJAX al
servidor de aplicaciones. Esta petición es atendida por el Controller encargado de tratar la petición, obtener
los datos y presentarlos en el formato que el componente necesita.
Un ejemplo sería la implementación del método getAll en el Controller correspondiente:
@RequestMapping(method = RequestMethod.GET, headers={"JQGridModel=true"})
public @ResponseBody JQGridJSONModel getAllJQGrid(
@ModelAttribute Alumno filterAlumno,
@ModelAttribute Pagination pagination) {
List<Alumno> alumnos = this.alumnoService.findAll(filterAlumno, pagination);
Long recordNum = this.alumnoService.findAllCount(filterAlumno);
AlumnoController.logger.info("[GET - jqGrid] : Obtener Alumnos");
return new JQGridJSONModel(pagination, recordNum, alumnos);
}
Para poder identificar que la petición proviene del componente tabla se añade en la misma una cabecera
con el siguiente aspecto
JQGridModel true
El siguiente código que permite distinguir si la petición ha sido realizada por el componente tabla:
@RequestMapping(method = RequestMethod.GET, headers={"JQGridModel=true"})
UDA proporciona la clase com.ejie.x38.dto.Pagination en la librería de utilidades comunes para
facilitar la transferencia de la información de la paginación desde el controller hasta las capas de negocio y
de acceso a datos. Los valores de los atributos del objeto se obtendrán de los parámetros de paginación del
componente que envía en la request.
Pagination pagination = new Pagination();
pagination.setPage(Long.valueOf(request.getParameter("page")));
pagination.setRows(Long.valueOf(request.getParameter("rows")));
pagination.setSort(request.getParameter("sidx"));
pagination.setAscDsc(request.getParameter("sord"));
Para facilitar la inicialización del objeto, se puede utilizar la anotación @ModelAttrbute de spring del siguente
modo:
public @ResponseBody JQGridJSONModel getAllJQGrid(
@ModelAttribute Alumno filterAlumno,
@ModelAttribute Pagination pagination) {

Una vez se ha obtenido la información que se debe visualizar en el mantenimiento, el componente requiere
que le sea enviado desde el servidor de aplicaciones una estructura json específica que contenga los datos
necesarios. Este objeto json sigue la siguiente estructura:
{"page":"1",
"rows":[{"id":"3","nombre":"BLSMASER","apellido1":"Beatriz",…},
{"id":"4","nombre":"BO00093L","apellido1":"Ana Isabel",…],
"total":"168",
"records":1671}
Donde cada una de las propiedades tiene el siguiente significado:
• page: Número de página en la que debe de posicionarse el componente.
• rows: Array que contiene un objeto json por cada uno de los registros que se muestran en el
mantenimiento. Cada objeto json contiene por cada columna un par clave-valor que indica el nombre
de la columna y el valor que se va a visualizar.
• total: Número total de páginas que debe de presentar el mantenimiento.
• records: Número total de registros que debe de presentar el mantenimiento.
Para facilitar la generación de esta estructura json, UDA proporciona la clase
com.ejie.x38.dto.JQGridJSONModel. Esta clase dispone de los atributos correspondientes a las
propiedades de los objetos json que requiere el componente. De este modo, se facilita la serialización del
objeto en la estructura json adecuada. Un ejemplo de su uso sería el siguiente:
JQGridJSONModel data = new JQGridJSONModel(pagination, recordNum, alumnos);

UDA-Componentes RUP. Tabla (v2.1.1 deprecado)

Más contenido relacionado

La actualidad más candente (20)

Destacado (7)

Similar a UDA-Componentes RUP. Tabla (v2.1.1 deprecado) (20)

Más de Ander Martinez (18)

Último (20)

UDA-Componentes RUP. Tabla (v2.1.1 deprecado)