Tabla

Enlace de datos

Defina o modifique el enlace de datos para la vista en la pestaña de propiedades Generales. La vista Tabla está enlazada a una lista de objetos que rellena las filas.

Propiedades de configuración

En Configuración, establezca o modifique las propiedades de configuración de la vista.

Las propiedades de configuración de aspecto para Tabla se listan en la tabla siguiente:

Tabla 1. Propiedades de configuración de aspecto para Tabla

Propiedad de configuración del aspecto	Descripción	Tipo de datos
Estilo de tabla	El estilo de la tabla. Puede elegir las opciones siguientes: Valor predeterminado (sin bordes, fondo gris claro) Elegante (bordes horizontales, con fondo blanco) Con bordes (bordes alrededor de las celdas) Rayado (filas sobre fondo blanco y gris claro alternas) Fila contextual (fila resaltada en gris al pasar el cursor por encima) Condensado (aspecto compacto gracias a la reducción del relleno de las celdas)	TableStyle
Estilo de color	El estilo de color de la tabla. Los colores corresponden a variables en el tema especificado. Puede elegir las opciones siguientes: Ninguno Claro (gris claro) Primario (azul oscuro) Información (azul claro) Éxito (verde) Advertencia (naranja) Peligro (rojo)	TableColorStyle
Resaltar selección	Sombrea las filas seleccionadas. Esta opción no funciona si el estilo de color es 'ninguno'.	Boolean
Ancho	Especifica la anchura de la tabla. Puede especificar la anchura en px (píxeles), en % (porcentaje) o en unidades em. Por ejemplo, 50px, 20%o 0.4em. Si no se especifica ningún tipo de unidad, se presupone que es px	String
Altura	Especifica la altura de la vista en px (píxeles) o en unidades em. Si no se especifica ningún tipo de unidad, se presupone que es px La altura no incluye la cabecera ni el pie. Si especifica una altura y las filas exceden el espacio vertical disponible en el cuerpo de la tabla, el cuerpo pasa a ser desplazable verticalmente.	String
Ajustar cabeceras de columna	Ajusta las columnas de cabecera en función del espacio disponible en la tabla.	Boolean
Mostrar elementos emergentes	Las vistas y menús emergentes aparecen sobre la tabla cuando no se especifica la altura. Por ejemplo, si esta opción está seleccionada, aparece una vista Selector de fecha y hora sobre la tabla. De lo contrario, el Selector de fecha y hora se incorpora en la celda de tabla.	Boolean
Estilo de cabecera y pie de página	Habilita para aplicar un estilo de cabecera y de pie de página distinto. El estilo Moderno , por ejemplo, agiliza la paginación en la cabecera y el pie de página.	TableHFStyle

Las propiedades de configuración del comportamiento para Tabla se listan a continuación:

Tabla 2. Propiedades de configuración de comportamiento para Tabla

Propiedad de configuración del comportamiento	Descripción	Tipo de datos
Modalidad de selección	Especifica cuántas filas puede seleccionar un usuario: Ninguna Único Múltiple Para una tabla en modo de selección Varios, Seleccionar todo selecciona todos los datos que están enlazados a esa tabla.	TableSelectionMode
Mostrar botón Suprimir	Mostrar u ocultar el botón para suprimir una fila.	Boolean
Mostrar pie de página	Mostrar u ocultar el pie de página. El pie de página también se muestra si está habilitada cualquiera de las vistas de pie de página, por ejemplo, Mostrar botón Añadir.	Boolean
Mostrar botón Añadir	Mostrar u ocultar el botón para añadir una fila. Si se está ordenando o filtrando la tabla, es posible que la fila recién añadida no se muestre como la última de la tabla, o que no se muestre en absoluto hasta que se quite la ordenación o el filtrado. Tenga en cuenta que si elige un estilo de cabecera y pie de página Moderno y desea mostrar el botón Añadir , también debe seleccionar la opción Mostrar pie de página .	Boolean
Mostrar estadísticas de tabla	Habilita la visualización de estadísticas de tabla en el pie de página. Por ejemplo, Showing 1 to 5 of 59 entries. Tenga en cuenta que también debe seleccionar la opción Mostrar pie de página.	Boolean
Mostrar buscapersonas	Mostrar u ocultar el número de páginas. El buscapersonas solo muestra 5 páginas, por lo tanto, dependiendo del tamaño de página inicial, y el número de registros, las páginas pueden no ser consecutivas (1, 2, 3 ...). Por ejemplo: La tabla tiene un total de 50 entradas y el tamaño de página inicial está establecido en 5. Los números de páginas que se muestran son 1, 3, 5, 7, 10. El usuario pulsa el botón Siguiente para pasar por las páginas en orden o utiliza los botones de número de página para desplazarse rápidamente por las páginas. Tenga en cuenta que también debe seleccionar la opción Mostrar pie de página.	Boolean
Mostrar medidor de página	Mostrar u ocultar el medidor de página, que muestra el número de filas en una página.	Boolean
Tamaño de página inicial	El número de filas que se visualizan en una página.	Integer
Cambiar el tamaño de las columnas	Permite al usuario cambiar el tamaño de las columnas arrastrando los separadores de columna.	Boolean
Tipo ANY	Especificación del tipo de definición de objeto de negocio cuando la vista está enlazada a una lista de tipos ANY.	TableANYType

var div = document.createElement("div");
div.innerHTML = cell.row.data["firstName"];
cell.setSortValue(cell.row.data["firstName"]);
return div;

Ejemplo

var autoObject = [];
autoObject[0] = {};
autoObject[0].name = "Dylan";
autoObject[0].favoriteSport = "Tennis";
autoObject[0].favoritePlayer = "Federer";
autoObject[1] = {};
autoObject[1].name = "Max";
autoObject[1].favoriteSport = "Soccer";
autoObject[1].favoritePlayer = "Messi";
autoObject

El servicio de usuario del lado del cliente tiene una variable privada profiles de tipo Profiles[].

En el servicio del lado del cliente, cree una copia de la página y conéctela a la primera página. En la segunda página, cambie la etiqueta de la Table por Perfiles - Coach dos.

Tipos de representación

Sucesos

Establezca o modifique los manejadores de sucesos para la vista en las propiedades de Sucesos. Puede establecer que los sucesos se activen mediante programación o cuando un usuario interactúe con la vista. Para obtener información sobre cómo definir y codificar sucesos, consulte Sucesos definidos por el usuario.

La tabla tiene los siguientes tipos de manejadores de sucesos:

• : Activado cuando se carga la tabla. Por ejemplo:

  me.setPageIndex(0);
  

• : Se activa cuando se carga una celda que tiene opciones de representación personalizadas (establecidas en la configuración de Columnas). Para utilizar este suceso, debe establecer Render como valor de configuración en la configuración Columnas. También puede utilizar este suceso para establecer tipos complejos. Por ejemplo:

  var div = document.createElement("div"); 
  div.innerHTML = cell.row.data[cell.varName]; 
  return div;

• : Activado cuando se muestran las filas. Este suceso se aplica únicamente para tablas con páginas. Por ejemplo:

  alert("All rows have " + (all ? "" : "NOT") + " been loaded");

• : Este evento se activa cuando se carga una fila expandible. Para utilizar este suceso, debe habilitar la opción permitir la configuración de filas expandibles. Por ejemplo, cuando la fila se representa como:

  row.views.forEach(function(view) { switch(view.context.viewid) { case "Text1": view.setData(row.data[varName]); break; case "Text2": view.setData(row.data[varName]); break; } });

  Ejemplo cuando la fila se representa como:

  var div = document.createElement("div"); div.innerHTML = row.data[varName] + " " + row.data[varName]; return div;

• : Se desencadena cuando la fila se expande. Por ejemplo:

  ${Service_Call1}.execute();

• : Se desencadena cuando la fila se contrae. Por ejemplo:

  alert("Collapsed row has index " + row.recordIndex);

• : Activado cuando el usuario selecciona una fila. Por ejemplo:

  alert("Selected row has index " + row.recordIndex);

• : Se activa cuando el usuario utiliza Seleccionar todo para seleccionar todas las filas de una tabla que está en modalidad de selección Múltiple o para borrar la selección en todas las filas de la tabla. Proporciona una variable de contexto denominada todos para indicar que todas o ninguna de las filas están seleccionadas. Por ejemplo:

  alert("All rows selected: " + all);

• : Se llama a este suceso cuando el usuario añade una fila mediante el botón. Si devuelve un objeto JavaScript, se añade el objeto, de lo contrario se añade un objeto vacío. Por ejemplo:

  alert("New row will be added");

• : Activado cuando el usuario solicita suprimir un registro. Si el suceso se devuelve, el registro no se suprime. Este suceso puede utilizarse para requerir la confirmación del usuario antes de que suprimir oficialmente el registro. Por ejemplo:

  return confirm("Are you sure you want to delete item " + item.str1);

• : Se activa cuando el usuario pulsa el icono de ordenación en una cabecera de columna de tabla. Vuelve a utilizar la ordenación personalizada y omite la ordenación de tabla predeterminada. Puede utilizar este suceso para establecer una lista ordenada de forma personalizada. Por ejemplo:

  alert("Sorting " + col + " column in " + order + " order"); 
  me.context.binding.set("value", myCustomSortedList); 
  return false;

• : Activado cuando el usuario cambia el valor del campo de entrada por página. Por ejemplo:

  me.showPager(true); 

• : Activado cuando el usuario cambia el tamaño de una columna. Por ejemplo:

  alert("Column resized");

• : Activado cuando el usuario arrastra y suelta una columna.

  alert("Column dropped");

Métodos

Para obtener información detallada sobre los métodos disponibles para Table, consulte la API de Table JavaScript .

Recursos adicionales

Para obtener información sobre cómo crear un coach o una página, consulte Creación de coaches.
Para obtener información sobre las propiedades estándar (General, Configuración, Posicionamiento, Visibilidady Atributos HTML), consulte Ver propiedades.