XSL - ocultar listado

ocultar listado

Publicado por maife (3 intervenciones) el 20/06/2008 00:50:20

Necesito generar un listado en donde al seleccionar cualquier fila, se despliegue el detalle de ese registro justo debajo de él.... pondré un ejemplo para que sea mas claro...

cod descripcion
01 articulos de escritorio
02 vestimenta

Seleccion el primer registro ( 01 articulos de escritorio)..

cod descripcion
01 articulos de escritorio
cod descripcion
01-1 lapiz
01-2 cuaderno
02 vestimenta

los datos vienen desde un xml por lo que es totalmente variable la cantidad de información a mostrar...

Espero que me ayuden....
gracias

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Crear un listado con detalles desplegables en función de la selección

Publicado por Alejandro (227 intervenciones) el 06/07/2023 20:12:48

Para lograr el efecto de desplegar el detalle de un registro al seleccionar una fila en un listado, puedes utilizar técnicas de JavaScript y CSS en combinación con XSLT.

Aquí hay una posible solución:

1. Agrega un evento de clic a cada fila del listado para que se active al seleccionarla. Puedes utilizar el atributo "onclick" y una función JavaScript para manejar el evento. Por ejemplo:

<xsl:for-each select="registro">

  <tr onclick="mostrarDetalle(this)">

    <!-- contenido de las celdas -->

  </tr>

</xsl:for-each>

2. Define una función JavaScript llamada "mostrarDetalle" que reciba la fila seleccionada como parámetro. Dentro de esta función, puedes acceder al elemento del detalle correspondiente y cambiar su estilo CSS para mostrarlo o ocultarlo. Por ejemplo:

function mostrarDetalle(fila) {

  var detalle = fila.nextElementSibling; // obtén el elemento del detalle siguiente

  if (detalle.style.display === "none") {

    detalle.style.display = "table-row"; // muestra el detalle

  } else {

    detalle.style.display = "none"; // oculta el detalle

3. En tu XSLT, asegúrate de estructurar adecuadamente el HTML para mostrar tanto el listado como los detalles. Por ejemplo:

<xsl:template match="/">

  <table>

    <xsl:for-each select="datos/registro">

      <!-- contenido de las filas del listado -->

      <tr onclick="mostrarDetalle(this)">

        <!-- contenido de las celdas -->

      </tr>

      <!-- contenido del detalle, inicialmente oculto -->

      <tr style="display: none;">

        <!-- contenido del detalle -->

      </tr>

    </xsl:for-each>

  </table>

</xsl:template>

De esta manera, al hacer clic en una fila del listado, se activará la función JavaScript que mostrará u ocultará el detalle correspondiente.

Recuerda ajustar el código según la estructura específica de tu XML y las necesidades de tu aplicación.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar