Saltar al contenido principal
Version: Next (5.0)

Grid en árbol

Un grid en árbol es un grid con treegrid="true": sus filas forman una jerarquía y las celdas de una columna llevan los botones que abren y cierran cada rama. Debajo está el grid en árbol real del cliente React de AWE. Abre los departamentos, selecciona una fila y cambia los atributos: el XML de debajo se actualiza.

Vista previa en vivo
XML
<grid id="demo"
      initial-level="2"
      treegrid="true"
      tree-id="id"
      tree-parent="parent"
      tree-leaf="isLeaf"
      expand-column="name"
      initial-load="query"
      target-action="Departments"
      load-all="true">
  <column name="name" label="Department" component="text" charlength="24" />
  <column name="owner" label="Head" component="text" charlength="14" />
  <column name="people"
          label="People"
          component="text"
          charlength="8"
          align="right" />
  <column name="budget"
          label="Budget (kEUR)"
          component="progress"
          charlength="14"
          align="right"
          bar-max="5500"
          bar-leaf-only="true" />
</grid>

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

AtributoControlValores
initial-levelNiveles visibles al inicio123
icon-expand and icon-collapseIconos de los botonespluschevron
multiselectSelección múltipletrue / false
Las filas son datos de ejemplo

La jerarquía sale de tres campos de cada fila: id, parent (vacío en una raíz) e isLeaf. En una pantalla vienen de una consulta. Con load-all="true" el grid recibe el árbol entero de una vez, como aquí; sin él, una rama se carga del servidor la primera vez que se abre.

Recetas​

Un árbol con todo abierto​

initial-level es cuántos niveles del árbol se muestran al cargar la pantalla: 1 muestra solo las raíces y 3 muestra este árbol entero.

<grid id="departments" treegrid="true" tree-id="id" tree-parent="parent" tree-leaf="isLeaf" expand-column="name"
      initial-load="query" target-action="Departments" load-all="true" initial-level="3">
  <column name="name" label="Department" component="text" />
  <column name="people" label="People" component="text" align="right" />
  <column name="budget" label="Budget (kEUR)" component="progress" align="right" bar-max="5500" bar-leaf-only="true" />
</grid>

bar-leaf-only dibuja la barra de datos del presupuesto solo en las hojas, donde no es la suma de sus hijas.

Elegir varias ramas​

multiselect añade una casilla a cada fila, padres incluidos, y la barra de selección del grid.

<grid id="departments" treegrid="true" tree-id="id" tree-parent="parent" tree-leaf="isLeaf" expand-column="name"
      initial-load="query" target-action="Departments" load-all="true" multiselect="true" initial-level="2">
  <column name="name" label="Department" component="text" />
  <!-- ... -->
</grid>

Tus propios iconos de despliegue​

icon-expand, icon-collapse e icon-leaf sustituyen los cuadrados de más y menos y el punto de una hoja. Aceptan los nombres de icono de AWE.

<grid id="departments" treegrid="true" tree-id="id" tree-parent="parent" tree-leaf="isLeaf" expand-column="name"
      icon-expand="chevron-right" icon-collapse="chevron-down" initial-level="2"
      initial-load="query" target-action="Departments" load-all="true">
  <column name="name" label="Department" component="text" />
  <!-- ... -->
</grid>

Eventos y acciones​

Abrir o cerrar una rama ejecuta la acción tree-branch; seleccionar una fila lanza el mismo evento select-row que en un grid plano. Estos ejemplos ejecutan ambas de verdad. En una pantalla sin load-all, abrir una rama por primera vez envía una acción de servidor (target-action) que responde con los hijos de la fila, algo que esta página no simula.

  • tree-branch: abre o cierra la rama de una fila.
  • select-row, select-all-rows, unselect-all-rows: cambian la selección.
  • filter: recarga el árbol desde su consulta.

Más​