Saltar al contenido principal
Version: 4.3.0

Tablas

Las tablas son el componente principal de AWE para mostrar las listas de datos. Está definido por grid y columns:

  • La tabla es el contenedor de la lista de datos. Tiene la consulta a cargar y un conjunto de atributos para definir el comportamiento de la tabla.
  • Cada columna contiene la fuente de los datos de la lista de datos, la etiqueta de la columna y otros atributos para administrar cada celda de columna.

También hay una etiqueta group-header que se utiliza para mostrar una cabecera de segundo nivel sobre un grupo de encabezados de columnas.

Tabla

Esqueleto de XML

Para definir una cuadrícula ** o un treegrid** en AWE debe seguir la siguiente estructura:

<grid id="[grid-identifier]" ...>
<column ... ></column>
...
<group-header ...>
<column ...></column>
...
</group-header>
...
<button ... > ... </button>
...
<context-button ...> ... </context button>
...
</grid>

Estructura de cuadrícula

<grid id="[grid-id]" style="[grid-style]" 
multiselect="[grid-is-multiselect]" checkbox-multiselect="[checkbox-multiselectable]" editable="[grid-is-editable]" send-operations="[grid-is-multioperation]" initial-load="[initial-load]" server-action="[server-action]" target-action="[target-action]" max="[elements-per-page] pagination-disabled="[pagination-disabled]"">
...
</grid>

Atributos generales

AtributoUsoTipoDescripciónValores
idObligatorioStringGrid identifier. Con fines de referencia
labelOpcionalStringTítulo de cuadrícula (sólo para imprimir)Note: You can use i18n files (locales)
styleOpcionalStringClases CSS de Grid
carga-inicialOpcionalStringLlamada de acción del servidor para cargar los datos de la cuadrícula. Sólo soporta el valor de consulta
server-actionOpcionalStringLlamada de acción del servidorVer lista de acciones del servidor
target-actionOpcionalStringDestino para llamar al servidor
maxOpcionalEnteroNúmero máximo de elementos a recuperar por página
paginación-desactivadaOpcionalBooleanDeshabilitado el elemento de paginación de la cuadrículaNota: Valor predeterminado falso
valores-paginadorOpcionalStringActivar paginador de cuadrícula. Establecer la lista de valores con el número de filas por páginaEjemplo: pager-value="5,25,50,100"
cargar-todoOpcionalBooleanCargar todos los valores de la cuadrícula y ordenar y paginar localmenteNota: El valor predeterminado es falso
enviar todoOpcionalBooleanEnviar todos los valores de la cuadrícula al servidor en lugar de a los seleccionados. (Las seleccionadas se enviarán el parámetro .selected)Nota: El valor predeterminado es falso
ayudaOpcionalStringTexto de ayuda para la cuadrículaNote: You can use i18n files (locales)
imagen de ayudaOpcionalStringImagen de ayuda para la cuadrículaEsta debe ser una ruta de imagen
carga de íconosOpcionalStringEstablecer el icono de cargaspinner (por defecto), cuadrado, círculos, alfombra, puntos, plegando, cuadrados, círculos, cubos, iconos, personalizados, ninguno

Estructura de columna

<column label="[column-label]" name="[column-name]" sort-field="[sort-field]" align="[text-align]" 
charlength="[column-width-chars]" component="[column-component]" >
<dependency ...> ... </dependency>
...
</column>

Atributos de columna

AtributoUsoTipoDescripciónValores
nameObligatorioStringIdentificador de columna. Con fines de referencia
sort-fieldOpcionalStringOrdenar por campo (si no treegrid)
typeOpcionalStringTipo de campo (para fines de impresión)string, integer, float o date
hiddenOpcionalBooleanLa columna no es visibleEl valor predeterminado es falso
alignOpcionalStringLa columna no es visibleizquierda, centro o derecha
widthOpcionalEnteroAncho de la columna en píxeles
sortableOpcionalBooleanEl campo es ordenable (si no es treegrid)El valor predeterminado es verdadero
movableOpcionalBooleanPermite mover la posición de la columna en la cuadrículaEl valor predeterminado es verdadero
sendableOpcionalBooleanLos datos de columna deben ser enviados al servidorEl valor predeterminado es verdadero
charlengthOpcionalEnteroAncho de columna en caracteres
labelOpcionalStringEtiqueta de columnaNote: You can use i18n files (locales)
styleOpcionalStringColumna clase cssClase bruta a aplicar a la columna
componentOpcionalStringTipo de columna (si editable)Ver componentes
maxOpcionalEnteroNúmero máximo de registros a recuperar cuando la columna se inicializa con acción de destinoEl valor predeterminado es 30
visibilityOpcionalBooleanVisibilidad inicial del componente de columnaEl valor predeterminado es verdadero
frozenOpcionalBooleanMantenga la columna fijada fuera del desplazamiento horizontal. ADVERTENCIA: No uses este atributo si el encabezado tiene más de una línea de altoEl valor predeterminado es falso

Nota: Cuando una columna es editable (tiene un componente) todos los atributos de criterios pueden ser usados en la columna. Ver criterios atributos para más referencias.

Componentes de columna

ComponenteDescripción
textoComponente de columna de texto. Ver el criterio de texto
contraseñaComponente de columna de contraseña. Ver el criterio de contraseña
textareaTextarea column component. See textarea criterion
numericComponente numérico de columna. Ver el criterio numérico
fechaComponente de columna de fecha. Ver el criterio de fecha
tiempoComponente de columna de tiempo. Ver el criterio de tiempo
fecha filtradaComponente de columna de fecha filtrado. Ver el criterio de fecha filtrado
seleccionarSeleccionar componente de columna. Ver seleccionar el criterio
sugerirSugerir componente de columna. Ver criterio de sugerencia
seleccionar-múltipleSeleccione un componente de columna múltiple. Ver seleccionar varios criterios
sugerir-múltipleSugerir el componente de múltiples columnas. Ver sugerir múltiples criterios
casillaComponente de columna Checkbox. See checkbox criterion
colorComponente de columna de color. Ver el criterio de color
cargadorComponente de columna del cargador. Ver el criterio de subida de
vista de textoComponente de columna de vista de texto. Ver el criterio de vista de texto
texto-formateadoComponente de columna de texto HTML. Ver componente de texto formateado
iconComponente de columna de icono. Úselo para mostrar iconos impresionantes de fuentes en una columna.
imagenComponente de columna de imagen. Utilícelo para mostrar imágenes en una columna.
buttonComponente que permite al usuario hacer clic en un botón que lanza un conjunto de botón-acción
progresoComponente de columna de progreso. Útil para mostrar una barra de progreso en una columna. (Trabajo en curso)
sparklineSparkline column component. Útil para mostrar un gráfico de sparkline en una columna. (Trabajo en curso)

Componentes de columna específicos

Existen varios componentes desarrollados específicamente para ser utilizados en células de la red. Estos componentes necesitan una estructura especial en la consulta que los llene:

<compound alias="specialCell">
<computed alias="value" format="xxx"/>
<computed alias="label" format="xxx" translate="EnumTranslate"/>
</compound>

Estas son las células que utilizan la estructura especial:

Celda estándar sin componentes

Cuando se envía una estructura compuesta a una celda estándar, se pueden utilizar los siguientes atributos:

AtributoDescripción
valueValor que se enviará al servidor
labelTexto que se mostrará. Puedes usar i18n archivos (locales)
titleTexto a mostrar cuando mueve el ratón sobre el icono. Puedes usar i18n archivos (locales)
estilo de celdaClase CSS para formatear el contenido

Componente de columna de vista de texto

Este componente es muy útil para mostrar un texto con estilo dentro de una cuadrícula con un icono. Los atributos compuestos para rellenar este componente son los siguientes:

AtributoDescripción
valueValor que se enviará al servidor
labelTexto que se mostrará. Puedes usar i18n archivos (locales)
titleTexto a mostrar cuando mueve el ratón sobre el icono. Puedes usar i18n archivos (locales)
iconClase de icono. Puedes ver todos los iconos en FontAwesome
unitEtiqueta unitaria (se muestra en la derecha de la celda). Puedes usar i18n archivos (locales)
styleClase CSS para formatear el contenido

Componente de columna de icono

IconColumn

Este componente es muy útil para mostrar un icono dentro de una cuadrícula. Los atributos compuestos para rellenar este componente son los siguientes:

AtributoDescripción
valueValor que se enviará al servidor
labelTexto a mostrar cuando mueve el ratón sobre el icono. Puedes usar i18n archivos (locales)
titleTexto a mostrar cuando mueve el ratón sobre el icono. Puedes usar i18n archivos (locales)
iconClase de icono. Puedes ver todos los iconos en FontAwesome
styleClase CSS para formatear el contenido

Componente de columna de texto con formato

Este componente se utiliza para mostrar código HTML dentro de una cuadrícula. Se permiten dos tipos de etiquetas HTML:

  • <format style="[text class]">: Texto formateado.
  • <br>: Nueva línea

Componente de columna de imagen

Columna

Este componente se utiliza para mostrar una imagen dentro de una cuadrícula. Los atributos compuestos para rellenar este componente son los siguientes:

AtributoDescripción
valueValor que se enviará al servidor
labelTexto alternativo. Puedes usar i18n archivos (locales)
titleTexto a mostrar cuando mueve el ratón sobre el icono. Puedes usar i18n archivos (locales)
imagenRuta de imagen
styleClase CSS para formatear el contenido

Componente de columna del botón

Columna del botón

Una columna de botón es un componente que permite lanzar un conjunto de botón-acción definido en columna.

AtributoDescripción
valueValor que se enviará al servidor
labelTexto a mostrar en el botón. Puedes usar i18n archivos (locales)
titleTexto a mostrar cuando mueve el ratón sobre el botón. Puedes usar i18n archivos (locales)
iconClase de icono para mostrar en el botón. Puedes ver todos los iconos en FontAwesome
styleClase CSS para formatear el contenido

Componente de columna de progreso

Progreso

El componente de progreso es muy útil para mostrar el estado de un trabajo, o una tarea.

AtributoDescripción
valueValor (en porcentaje (0-100) de la barra de progreso
labelTexto a mostrar en la barra de progreso (es decir, porcentaje)
titleTexto a mostrar cuando mueve el ratón sobre el botón. Puedes usar i18n archivos (locales)
styleClase CSS para formatear el contenido

Sparkline column component

(Trabajo en curso)

Estructura de cabecera de grupo

<group-header label="[group-header-label]" name="[group-header-name]">
<column...> ... </column>
...
</group-header>
Encabezado de grupo

Atributos de cabecera de grupo

AtributoUsoTipoDescripciónValores
nameObligatorioStringIdentificador de cabecera de grupo. Con fines de referencia
labelOpcionalStringEtiqueta de cabecera de grupoNote: You can use i18n files (locales)

Cuadrícula básica

La cuadrícula básica es la cuadrícula estándar sin una estructura de árbol. Se puede definir como cuadrícula de una sola selección, cuadrícula multiselectiva, cuadrícula editable o cuadrícula multiopcional y combinaciones entre ellas.

BasicGrid

Atributos básicos específicos de la cuadrícula

AtributoTipoDescripciónValores
mostrar totalesBooleanMostrar una línea con totalizadoresEl valor predeterminado es falso
números de filaBooleanMostrar los números de filaEl valor predeterminado es falso

Multiselección de cuadrícula

MultiselectGrid

Atributos específicos de cuadrícula de selección múltiple

AtributoTipoDescripciónValores
multiselecciónBooleanPermitir seleccionar más de una líneaEl valor predeterminado es falso
checkbox-multiselecciónBooleanPermitir seleccionar más de una línea, pero haciendo clic en solo en las casillas lateralesEl valor predeterminado es falso

Rejilla de árbol

La rejilla de árbol es una rejilla que se puede expandir como árbol. Se puede definir como árbol estándar, cargando árbol, árbol editable o árbol multiopción, y combinaciones entre ellos.

La estructura de datos necesita un identificador por fila, y también un identificador padre, sin valor si la fila es una fila raíz (sin padre). El campo identificador debe definirse en el atributo árbol-id de cuadrícula y el padre debe definirse en el atributo árbol-padre.

Cuadrícula

Atributos específicos de la cuadrícula del árbol

AtributoTipoDescripciónValores
zambullirBooleanEstablecer cuadrícula como treegridEl valor predeterminado es falso
arbol-idStringDefinir campo identificadorEl valor predeterminado es id
árbol-padreStringDefinir campo padreEl valor predeterminado es padre
hoja de árbolStringDefinir el campo 'is leaf'El valor predeterminado es isLeaf
ampliar-columnaStringNombre de la columna a expandirDebe ser un identificador de columna
nivel inicialEnteroNivel inicial para expandirEl valor predeterminado es 1
expansión de iconosStringIcono de una rama sin expandirNota: Se pueden utilizar todos los iconos de FontAwesome
icono contraídoStringIcono de una rama expandidaNota: Se pueden utilizar todos los iconos de FontAwesome
hoja de iconoStringIcono de una rama de hojaNota: Se pueden utilizar todos los iconos de FontAwesome

Rejilla editable

Grilla editable

Atributos específicos de rejilla editables

AtributoTipoDescripciónValores
editableBooleanPermite editar las filas de cuadrículaEl valor predeterminado es falso

Multiopción de cuadrícula

Multiopción

Nota: La cuadrícula multiopción enviará una variable llamada [GridId]-RowTyp (donde [GridId] es el identificador de la cuadrícula) que contiene la acción realizada en cada fila (INSERT, ACTUALIZACIÓN o DELETE acciones)

Atributos específicos de cuadrícula de múltiples opciones

AtributoTipoDescripciónValores
enviar-operacionesBooleanPermite editar las filas de cuadrícula, pero enviando sólo las líneas modificadasEl valor predeterminado es falso

Botones de cuadrícula

Puede añadir elementos de botón para realizar acciones sobre las cuadrículas. Por ejemplo, un par de botones para insertar y borrar filas.

Botones de rejilla
<grid id="GrdKeyLst" style="expand" initial-load="query" server-action="data" target-action="AweKeyLst" send-operations="true" editable="true" max="40">
<column label="COLUMN_NAM" name="KeyNam" sort-field="KeyNam" align="left" charlength="20" component="text" validation="required">
<dependency source-type="query" server-action="unique" target-action="AweKeyUni">
<dependency-element id="GrdKeyLst" column="KeyNam" attribute="currentRowValue" />
</dependency>
</column>
...
<button label="BUTTON_NEW" icon="plus-circle" id="ButGrdKeyLstAdd">
<button-action type="add-row" target="GrdKeyLst" silent="true" />
</button>
<button label="BUTTON_DELETE" icon="trash" id="ButGrdKeyLstDel">
<button-action type="delete-row" target="GrdKeyLst" silent="true" />
<dependency target-type="enable" initial="true">
<dependency-element id="GrdKeyLst" attribute="selectedRows" condition="==" value="1" />
</dependency>
</button>
</grid>

Menú contextual

Puede definir un menú de contexto dentro de la cuadrícula para ayudar al usuario a realizar acciones con las filas seleccionadas. Ver menú contextual.

Menú contextual cuadriculado

Variables

El componente grid envía algunas variables específicas al servidor, dependiendo de su estado y atributos. Aquí está la lista de variables que pueden ser enviadas por el componente de cuadrícula:

VariableTipoCondiciónDescripción
[GridName]MatrizSiempreLista de identificadores de líneas seleccionadas
[ColumnName]Matrizenviar-all="falso"Lista de valores de columnas de líneas seleccionadas (para cada columna)
[ColumnName]Matrizenviar-all="verdadero"Lista de todos los valores de columna (para cada columna)
[ColumnName].selectedValor/MatrizSiempreLista de valores de columna de líneas seleccionadas (para cada columna). Si sólo hay una fila seleccionada, sólo enviará el valor en lugar de una matriz
selectedRowAddressJsonNodeCuando sólo hay una línea seleccionadaNodo Json con la dirección `` de la fila seleccionada: vista, componente e id de fila
sortMatrizSiempreLista de JsonNodes con la información de ordenamiento de cuadrícula (id: id de columna, dirección: dirección de ordenación)
[GridName].dataJsonNodeSiempreLista de información extra de la cuadrícula (página, máximos registros, información de ordenación, etc.)

La cuadrícula multioperación envía las variables de una manera diferente a las otras rejillas:

VariableTipoCondiciónDescripción
[GridName]Enteromultioperation="verdadero"Número de operaciones enviadas
[GridName].RowTypMatrizmultioperation="verdadero"Lista de operaciones requeridas para cada columna (sólo para las filas con operaciones)
[GridName]-idMatrizmultioperation="verdadero"Lista de identificadores de fila para registros con operaciones
[ColumnName]Matrizmultioperation="verdadero"Lista de valores de columna para filas con operaciones (para cada columna)
[ColumnName].selectedValor/MatrizSiempreLista de valores de columna de líneas seleccionadas (para cada columna). Si sólo hay una fila seleccionada, sólo enviará el valor en lugar de una matriz
selectedRowAddressJsonNodeCuando sólo hay una línea seleccionadaNodo Json con la dirección `` de la fila seleccionada: vista, componente e id de fila
sortMatrizSiempreLista de JsonNodes con la información de ordenamiento de cuadrícula (id: id de columna, dirección: dirección de ordenación)
[GridName].dataJsonNodeSiempreLista de información extra de la cuadrícula (página, máximos registros, información de ordenación, etc.)

Nota: Ver muestras de uso en Definición de servicio