Componentes para las opciones

En lugar de utilizar el ID en la URL podría preferir crear un filtrado utilizando el componente especial Select con la posibilidad de seleccionar un país de la lista. Anteriormente, ya hemos utilizado el componente Relselect y la lógica de su trabajo es muy similar, pero gracias a Selectpodemos no sólo ofrecer una elección entre todos los países disponibles, sino también añadir nuestras propias opciones.

Select componente

Veamos el ajuste Select la opción que determinará qué ciudades de qué países deben estar en la tabla, y se ha añadido la posibilidad de mostrar todas las ciudades disponibles, en general.

Al crear un Select componente, hay que rellenarlo con las opciones entre las que se hará la selección. Para ello, como en Relselectes necesario obtener una lista general de países. Pero entonces no enviamos esta lista a Select directamente, sino que la convertimos en opciones disponibles, cada una de las cuales se representa como un Select Option modelo. Por lo tanto, declaramos el Select Options array como una variable y la llenamos con los datos necesarios en un bucle.

En este ejemplo, los campos esenciales Select Options para nosotros serán Label (el texto de la opción propuesta) y Value (su identificador numérico). Establece estos valores con el nombre del país y su identificador.

Cuando el bucle se haya completado, debemos crear y añadir una opción más que muestre todas las ciudades disponibles sin filtrar por países. Establezcamos Label = World y Value = 0.

Al seleccionar cualquier opción, el Select onChange se disparará. Usémoslo para averiguar la opción seleccionada y escribirla en la nueva variable global Country selected. En este caso, es necesario hacer una comprobación adicional, y si la última opción (todas las ciudades disponibles) fue seleccionada, entonces el valor de esta variable debe ser establecido como vacío (null).

La última acción de este proceso de negocio es hacer clic en el botón Refresh que refresca los datos de la tabla. Su proceso de negocio también debe modificarse ligeramente para tener en cuenta la aparición de una nueva variable.

Ahora podemos elegir qué ciudades de qué país deben aparecer en la tabla.

Dropdown componente

Y por último, veamos otro componente que permite elegir diferentes opciones - Dropdown. Su diferencia clave es que la selección de una opción concreta debe desencadenar inmediatamente alguna acción en lugar de limitarse a recordar la opción seleccionada. Puede llamarse botón con funcionalidad extendida.

Por ejemplo, utilicemos Dropdown como sustituto del botón de borrar el país en la tabla. Ahora no borrará inmediatamente la entrada en la base de datos, sino que llamará a opciones adicionales en las que se puede confirmar el borrado o cancelarlo.

Comencemos con la configuración general del componente. Vamos a elegir su apariencia y las opciones disponibles.

A continuación, crearemos el proceso de negocio propiamente dicho. Y la primera acción en él será determinar el registro sobre el que se ha pulsado el botón Dropdown fue pulsado. En el caso de los botones ordinarios, este valor se pasa como un Record IDpero en este caso, ni siquiera se pulsará el Dropdown mismo será presionado, sino su componente hijo con la opción deseada. Por lo tanto, obtener el ID de la entrada es un poco más complicado.

Para los elementos de la tabla que se repiten, el Component ID consta de dos partes, separadas por el signo "-". La primera parte es el ID del componente estándar. Pero la segunda parte es sólo el ID del registro, cuya adición hace que el identificador de los componentes repetidos sea único.

Sabiendo esto, sólo tenemos que obtener este ID. Por lo tanto, dividiremos la cadena en partes (Split string) y averiguaremos el valor de la segunda parte (index = 1)

Como siguiente paso debemos averiguar qué opción se ha seleccionado.

Si efectivamente se trata de una opción para confirmar la eliminación, entonces ejecute el comando correspondiente. En caso contrario, no se puede hacer nada porque alguna acción no es necesaria.

Ahora la eliminación de registros de la base de datos está protegida de los clics accidentales.