Grid
El grid es el caballo de batalla de una pantalla de AWE: una tabla de filas alimentada por una consulta, con ordenación, paginación, selección, filas editables, filtros por columna, totales y agrupación. Debajo está el grid real del cliente React de AWE. Pulsa una cabecera para ordenar, pulsa una fila para seleccionarla, recorre las páginas y cambia los atributos: el XML de debajo se actualiza.
<grid id="demo"
max="8"
initial-load="query"
target-action="Customers"
load-all="true">
<column name="name"
label="Customer"
sortable="true"
charlength="20"
avatar-field="initials"
secondary-field="email" />
<column name="plan"
label="Plan"
sortable="true"
charlength="8"
status-field="planTone" />
<column name="country" label="Country" sortable="true" charlength="10" />
<column name="mrr"
label="MRR (EUR)"
component="progress"
sortable="true"
charlength="11"
align="right"
bar-max="9500"
summary-type="sum" />
<column name="trend"
label="Last 6 months"
component="sparkline"
charlength="11"
sparkline-type="line"
sparkline-last-point="true" />
</grid>
- Atributos
- Eventos y acciones
- Referencia completa
Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD
| Atributo | Control | Valores |
|---|---|---|
max | Filas por página | 5812 |
multiselect | Selección múltiple | true / false |
row-numbers | Números de fila | true / false |
enable-filters | Filtros por columna | true / false |
show-totals | Fila de totales | true / false |
editable | Filas editables | true / false |
group-by | Agrupar por | plancountry |
| Evento | Descripción |
|---|---|
select-row | Se selecciona una fila: se ejecutan las dependencias y acciones que escuchan al grid. |
| Acción (type) | Qué hace |
|---|---|
select-row | Selecciona las filas cuyos identificadores están en el valor. |
select-all-rows | Selecciona todas las filas; unselect-all-rows limpia la selección. |
add-row | Añade una fila (add-row-top y add-row-bottom eligen dónde). |
delete-row | Elimina las filas seleccionadas. |
filter | Recarga el grid desde su consulta, con los criterios de la pantalla. |
En una pantalla, las filas vienen de una consulta (initial-load="query"). Aquà son una lista fija de 24 clientes de ejemplo, y el XML
declara load-all="true": el grid recibe todas las filas de una vez y las pagina, ordena y selecciona en el cliente, asà que no hace
falta servidor. Con una consulta real y sin load-all, paginar y ordenar vuelven a cargar los datos del servidor.
Recetas​
Elegir varias filas​
multiselect añade una columna de casillas y una barra de selección que indica cuántas filas hay seleccionadas y permite limpiarlas.
row-numbers numera las filas de la página.
<grid id="customers" initial-load="query" target-action="Customers" load-all="true"
multiselect="true" row-numbers="true" max="8">
<column name="name" label="Customer" component="text" sortable="true" avatar-field="initials" secondary-field="email" />
<column name="plan" label="Plan" component="text" sortable="true" status-field="planTone" />
<!-- ... -->
</grid>
Editar una fila en su sitio​
editable añade un lápiz a cada fila. Una columna cuyo component tiene editor (text, numeric, select, checkbox, date...)
se convierte en un campo mientras se edita su fila; los demás componentes siguen de solo lectura. Pulsa Intro o el check para
guardar y Escape o la cruz para cancelar. Aquà la edición se queda en el cliente: en una pantalla, un button con una acción
server guarda las filas modificadas.
<grid id="customers" initial-load="query" target-action="Customers" load-all="true"
editable="true" validate-on-save="false" max="8">
<column name="name" label="Customer" component="text" sortable="true" />
<column name="country" label="Country" component="text" sortable="true" />
<!-- ... -->
</grid>
Agrupar filas con subtotales​
group-by recibe una lista de columnas separadas por comas, un nivel de agrupación cada una. Cada fila de grupo muestra su valor, su
número de filas y el agregado de las columnas con summary-type (aquà la suma del MRR); un grid agrupado muestra todas las filas sin
paginar.
<grid id="customers" initial-load="query" target-action="Customers" load-all="true" group-by="plan">
<column name="plan" label="Plan" component="text" sortable="true" />
<column name="mrr" label="MRR (EUR)" component="progress" bar-max="9500" summary-type="sum" />
<!-- ... -->
</grid>
Tipos de columna​
El component de una column elige el aspecto de una celda. El playground de arriba usa:
text: texto simple, con un avatar (avatar-field), una segunda lÃnea (secondary-field) y un estado de color (status-field) leÃdos de otros campos de la fila.progress: una barra de datos detrás del número, escalada conbar-minybar-max.sparkline: un minigráfico de una serie de números (sparkline-typeesline,baroarea).
Otros son numeric, select, checkbox, date, icon, image, link, color y button. La
referencia XSD del elemento column los lista con sus atributos.
Eventos y acciones​
Seleccionar una fila es un evento: se ejecutan sus dependencias y los botones que escuchan al grid. Las acciones de abajo actúan sobre un grid; estos ejemplos ejecutan de verdad las del lado cliente (seleccionar, paginar, ordenar, editar) y nada más.
select-row,select-all-rows,unselect-all-rows: cambian la selección.add-row,delete-row,update-row: cambian las filas antes de guardarlas.filter: recarga el grid desde su consulta. Es una acción de servidor: aquà no se simula.
Más​
- Documentación completa de los grids: cada atributo, tipo de columna, acción y la parte de servidor.
- Referencia XSD del elemento
grid. - Grid en árbol: el mismo grid con filas padre e hijas desplegables.