WArrayBrowse no puedo fijar cabeceras

Acceder Darse de alta He olvidado la contraseña

Topic Resolution: Resolved

Etiquetado: Ejemplos. wArrayBrowse

Este debate tiene 8 respuestas, 2 mensajes y ha sido actualizado por última vez el 3 años, 6 meses por Xevi. This post has been viewed 673 times

Mostrando 8 respuestas a los debates

Autor

Entradas

17-10-2020 a las 09:21 #1263

Xevi

Participante

Estoy intentando "personalizar" y entender más de Néfele/Html/Css... (un poco)

Bien, dado un WArrayBrowse, alguna opción para "retocarlo" no he sabido encontrarlo, pero tocando el inspector del navegador, aprendo/entiendo alguna cosilla.

Así que, con este código...

PROCEDURE xeviMiBrowse()
   Local aItems := {}
   Local n

   For n:=1 To 50
      AAdd( aItems, { "Registro " + ToString(n), "Columna2" } )
   Next

   WITH OBJECT TWebPage():New()

      //Un contenedor del Browse
      WITH OBJECT WBevel():New(:WO)
         :oStyle:cPadding_left := 0      //No dejo márgenes a la izquierda
         :oStyle:cPadding_right := 0     //No dejo márgenes a la derecha
         :oStyle:cHeight := "460px"      //Establezco un alto fijo, quiero un Browse con scolling
         :oStyle:cOverflow_y := "scroll" // Solo scroll vertical

         WITH OBJECT  WArrayBrowse():New(:WO)
            :nStyle       := xc_Striped      // Estilo visual, con pautado pijama
            :cClrHeadPane := "black"         // Color de Fondo a las cabeceras
            :cClrHeadText := "white"         // Color del texto de cabeceras
            :oStyle:cLine_height := 0        //Quito altura entre registro y registro

            :cCSS += "table.striped>tbody>tr>td { border: 1px solid #dee2e6; }"   // Borde al Browse, interlineado y entre columnas
            :cCSS += "#abw0001_head1 { text-align:right !important; }"           // Título primera columna alineado izq.
            :cCSS += "#abw0001_head1 { padding-top: 0px; padding-bottom: 2px; }"  // Menos alto título columnas
            :cCSS += "#abw0001_head2 { padding-top: 0px; padding-bottom: 2px; }"  // debo establecerlas a TODAS

             // Añadimos Columnas
             WITH OBJECT :AddCol( "Col1" ) AS wItemColBrowse
               :cAlign   := xc_Right
             END WITH
             WITH OBJECT :AddCol( "Col2" ) AS WItemColBrowse
               :lBold := .T.
               :cAlign   := xc_Left
             END WITH

             :aItems := AsciiHTML(aItems)  // Le alimentamos datos directamente de la consulta

             :Create()

         END WITH  //ArrayBrowse

         :Create()
      END WITH  //Bevel

      oCgi:SendPage( :Create() )
   END WITH //WebPage

RETURN

PROCEDURE xeviMiBrowse()

Local aItems := {}

Local n

For n:=1 To 50

AAdd( aItems, { "Registro " + ToString(n), "Columna2" } )

WITH OBJECT TWebPage():New()

//Un contenedor del Browse

WITH OBJECT WBevel():New(:WO)

:oStyle:cPadding_left := 0 //No dejo márgenes a la izquierda

:oStyle:cPadding_right := 0 //No dejo márgenes a la derecha

:oStyle:cHeight := "460px" //Establezco un alto fijo, quiero un Browse con scolling

:oStyle:cOverflow_y := "scroll" // Solo scroll vertical

WITH OBJECT WArrayBrowse():New(:WO)

:nStyle := xc_Striped // Estilo visual, con pautado pijama

:cClrHeadPane := "black" // Color de Fondo a las cabeceras

:cClrHeadText := "white" // Color del texto de cabeceras

:oStyle:cLine_height := 0 //Quito altura entre registro y registro

:cCSS += "table.striped>tbody>tr>td { border: 1px solid #dee2e6; }" // Borde al Browse, interlineado y entre columnas

:cCSS += "#abw0001_head1 { text-align:right !important; }" // Título primera columna alineado izq.

:cCSS += "#abw0001_head1 { padding-top: 0px; padding-bottom: 2px; }" // Menos alto título columnas

:cCSS += "#abw0001_head2 { padding-top: 0px; padding-bottom: 2px; }" // debo establecerlas a TODAS

// Añadimos Columnas

WITH OBJECT :AddCol( "Col1" ) AS wItemColBrowse

:cAlign := xc_Right

END WITH

WITH OBJECT :AddCol( "Col2" ) AS WItemColBrowse

:lBold := .T.

:cAlign := xc_Left

END WITH

:aItems := AsciiHTML(aItems) // Le alimentamos datos directamente de la consulta

:Create()

END WITH //ArrayBrowse

:Create()

END WITH //Bevel

oCgi:SendPage( :Create() )

END WITH //WebPage

RETURN

las líneas que no he encontrado Nefelizadas, las he añadido con :cCSS

Ahora bien, para que la cabecera se quede "fija" no he sabido encontrar la manera.

He leído alguna cosa por ahí y por allá, que si con...

position: fixed

Pero por mas que toqueteo el inspector no allo donde o como lograr este efecto en el Browse.

Gracias por vuestro tiempo.

Un Saludo,

Xevi.

Este debate fue modificado 3 años, 6 meses por Alfredo Sanz.

17-10-2020 a las 13:47 #1264

Alfredo Sanz

Superadministrador

Yes, We Can!

Es buena idea, la "nefelizaremos" para la próxima versión.

PROCEDURE xeviMiBrowse()
   Local aItems := {}
   Local n

   For n:=1 To 50
      AAdd( aItems, { "Registro " + ToString(n), "Columna2" } )
   Next

   WITH OBJECT TWebPage():New()

      WSeparator():New(:WO):Create()
      WSeparator():New(:WO):Create()


      //Un contenedor del Browse
      WITH OBJECT WBevel():New(:WO)
         :oStyle:cPadding_left := 0      //No dejo márgenes a la izquierda
         :oStyle:cPadding_right := 0     //No dejo márgenes a la derecha

         WITH OBJECT  WArrayBrowse():New(:WO)
            :cId := "table"
            :lIncludeArray := .f.
            :nStyle       := xc_Striped      // Estilo visual, con pautado pijama
            :cClrHeadPane := "black"         // Color de Fondo a las cabeceras
            :cClrHeadText := "white"         // Color del texto de cabeceras
            :oStyle:cLine_height := 0        //Quito altura entre registro y registro

            :cCSS += "table.striped>tbody>tr>td { border: 1px solid #dee2e6; }"   // Borde al Browse, interlineado y entre columnas
            :cCSS += "#table_head1 { padding-top: 0px; padding-bottom: 2px; }"  // Menos alto título columnas
            :cCSS += "#table_head2 { padding-top: 0px; padding-bottom: 2px; }"  // debo establecerlas a TODAS

            :cCSS += cssMakeScrollable()

            // Añadimos Columnas
            WITH OBJECT :AddCol( "Col1", xc_Right, xc_Right ) AS WItemColBrowse // texto cabecera, alineacion cabecera, alineacion datos AS wItemColBrowse
               :nWidth := 25
            END WITH

            WITH OBJECT :AddCol( "Col2", xc_Center, xc_Left ) AS WItemColBrowse
               :lBold  := .T.
               :nWidth := 75
            END WITH

             :aItems := AsciiHTML(aItems)  // Le alimentamos datos directamente de la consulta

             :Create()

         END WITH  //ArrayBrowse

         :Create()
      END WITH  //Bevel

      oCgi:SendPage( :Create() )
   END WITH //WebPage

RETURN
//------------------------------------------------------------------------------

FUNCTION cssMakeScrollable()
LOCAL cTxt
   //https://stackoverflow.com/questions/47723996/table-with-fixed-thead-and-scrollable-tbody
   TEXT INTO cTxt
     .table > thead { display:table; width: 100%; background: black; }
     .table > thead > tr { width: calc(100% - 17px); }
     .table > thead > tr > th { border-bottom: 1px black solid; }
     .table > tbody {  max-height: 485px; overflow-y: scroll; display: block; }
     tr { display: table; width: 100%; }
   ENDTEXT

RETURN cTxt

//------------------------------------------------------------------------------

PROCEDURE xeviMiBrowse()

Local aItems := {}

Local n

For n:=1 To 50

AAdd( aItems, { "Registro " + ToString(n), "Columna2" } )

WITH OBJECT TWebPage():New()

WSeparator():New(:WO):Create()

//Un contenedor del Browse

WITH OBJECT WBevel():New(:WO)

:oStyle:cPadding_left := 0 //No dejo márgenes a la izquierda

:oStyle:cPadding_right := 0 //No dejo márgenes a la derecha

WITH OBJECT WArrayBrowse():New(:WO)

:cId := "table"

:lIncludeArray := .f.

:nStyle := xc_Striped // Estilo visual, con pautado pijama

:cClrHeadPane := "black" // Color de Fondo a las cabeceras

:cClrHeadText := "white" // Color del texto de cabeceras

:oStyle:cLine_height := 0 //Quito altura entre registro y registro

:cCSS += "table.striped>tbody>tr>td { border: 1px solid #dee2e6; }" // Borde al Browse, interlineado y entre columnas

:cCSS += "#table_head1 { padding-top: 0px; padding-bottom: 2px; }" // Menos alto título columnas

:cCSS += "#table_head2 { padding-top: 0px; padding-bottom: 2px; }" // debo establecerlas a TODAS

:cCSS += cssMakeScrollable()

// Añadimos Columnas

WITH OBJECT :AddCol( "Col1", xc_Right, xc_Right ) AS WItemColBrowse // texto cabecera, alineacion cabecera, alineacion datos AS wItemColBrowse

:nWidth := 25

END WITH

WITH OBJECT :AddCol( "Col2", xc_Center, xc_Left ) AS WItemColBrowse

:lBold := .T.

:nWidth := 75

END WITH

:aItems := AsciiHTML(aItems) // Le alimentamos datos directamente de la consulta

:Create()

END WITH //ArrayBrowse

:Create()

END WITH //Bevel

oCgi:SendPage( :Create() )

END WITH //WebPage

RETURN

//------------------------------------------------------------------------------

FUNCTION cssMakeScrollable()

LOCAL cTxt

//https://stackoverflow.com/questions/47723996/table-with-fixed-thead-and-scrollable-tbody

TEXT INTO cTxt

.table > thead { display:table; width: 100%; background: black; }

.table > thead > tr { width: calc(100% - 17px); }

.table > thead > tr > th { border-bottom: 1px black solid; }

.table > tbody { max-height: 485px; overflow-y: scroll; display: block; }

tr { display: table; width: 100%; }

ENDTEXT

RETURN cTxt

//------------------------------------------------------------------------------

Contenido no disponible.
Por favor, acepta las cookies haciendo clic en este aviso

Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.

17-10-2020 a las 16:01 #1273

Xevi
Participante

PERFECTO!!!

Y ya para dejarlo todavía más mejor...

OnclickHeader, ¿sería posible añadirlo???

Que se recibiera la columna en la que se ha presionado click, y así poder hacer, cosillas como Ordenación A-Z o Z-A

El :cOnClick del WArrayBrowse sirve o actúa cuando se presiona click en un registro... pero igual valdria ese mismo evento si el registro fuera cero o -1 . No se, pienso en voz alta, jejeje

Gracias por vuestro tiempo.

Un Saludo,

Xevi.
18-10-2020 a las 13:20 #1280

Alfredo Sanz
Superadministrador

Tomo nota.
18-10-2020 a las 13:29 #1281
Xevi
Participante
Ahora, pensando y viendo algun browse con TWeb Botstrapp, forma parte de la rabla... se incluye una imagen doble flecha si no orden, flecha hacia arriba si orden ascendente, flecha abajo si orden descendente.

Es una forma "cerrada" del browse, pero no tienes que programar NADA, el browse ya lo lleva incluido.

Como idea para un simple browse, estaría bien.
- Esta respuesta fue modificada 3 años, 6 meses por Xevi.
18-10-2020 a las 13:57 #1283
Alfredo Sanz
Superadministrador
Sí,

En néfele vamos a tener inicialmente dos browses.
- wArrayBrowse: lo estamos diseñando desde cero, basado en tablas html. Con funciones limitadas pero sencillo de implementar
- DataTables.net: Va a incorporar todas las funcionalidades de este fantástico plugin (filtrar, ordenar, paginar, etc....)
El DataTables lo estamos cocinando y espero poder enseñar algo muy prontito.

El wArrayBrowse, ya es funcional, lo que no quiere decir que no le incorporemos más "cosicas" según se necesiten, por ejemplo:

Contenido no disponible.
Por favor, acepta las cookies haciendo clic en este aviso
- Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
- Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
18-10-2020 a las 15:18 #1284

Xevi
Participante

👏👏👏

Si ya lo teneis hecho!!!

Y no podemos actualizar???

jejeje

Un Saludo,

Xevi
18-10-2020 a las 18:24 #1287

Alfredo Sanz
Superadministrador

Bueno, como diría el amigo Quim, lo tengo hecho "a cuchillo" para comprobar que funciona.

Ahora falta darle "el toque Néfele"

En unos días estará terminado.
18-10-2020 a las 19:50 #1288

Xevi
Participante

Un pequeño detalle.

Borde cabecera y entre columnas cabecera.

:cCSS += "table.striped tr { border: 1px solid #dee2e6; }"

Un Saludo,

Xevi.

Autor

Entradas

Mostrando 8 respuestas a los debates

Debes estar registrado para responder a este debate.