Herramientas de usuario

Herramientas del sitio


contrib:wdatatable

¡Esta es una revisión vieja del documento!


wDataTable

Esta clase Nefeliza el control DataTables.net, permitiendo incluir en nuestras web Browses para la representación y/o edición de datos de una manera sencilla y muy vistosa.

Ha sido realizada como una contribución a Néfele.

Ejemplo de uso

PROCEDURE DataTable( o )

   WITH OBJECT WDataTable():New(o)
      :cId     := "browse5"
      :CssClass:= "cell-border"
      :cTitle  := "Celdas, rejilla"
      :AddButton("print")
      :lButtonPDF := .T.
      
      WITH OBJECT :Configure()
         :SetColumns({"Nombre", "Puesto", "Agencia", "Extn.", "Fecha de inicio", "Salario"})
         :data := GetDataArray()
      END
      :Create()
   END

RETURN

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

function GetDataArray()
return {;
         { "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" },;
         { "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" },;
         { "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" },;
         { "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" },;
         { "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" },;
      }

Propiedades

Nombre Init Descripción Versión
cClassId 'dtb' 0.3
cId Nil Identificador único para cada Control 0.3
cTitle Texto que aparecerá en la cabecera del control 0.3
CssClass “compact” Estilo de la Tabla 0.3
lResetLocalStorage .T. Limpia el Local Storage del datatable antes de crearlo 0.3
lButtonCopy .F. Habilita el botón de de copiar al portapapeles 0.3
lButtonCSV .F. Habilita el botón de exportar a CSV 0.3
lButtonExcel .F. Habilita el botón de exportar a EXCEL 0.3
lButtonPDF .F. Habilita el botón de exportar a PDF 0.3
lButtonPrint .F. Habilita el botón de Imprimir 0.3
lSelectable .F. Habilita la selección de filas 0.3
cSelectStyle “os” Define el tipo de selección (os, single, multi y multi+shift ) 0.3
lRowReOrder .F. Habilita la reordenación de las filas 0.3
lScrollToTop .T. Cuando se crea la tabla se posiciona en la primera fila 0.3
lSmooth .T. Hace un smooth scroll para saltar 0.3
cTopDivClass “z-depth-4” Clase CSS por defecto del wBevel que contiene el scroll 0.3

Métodos

Nombre Descripción Versión
Configure Este método nos devuelve el objeto options del DataTables, las propiedades de este objeto están documentadas en la ayuda de DataTables.net 0.3
AddButton Añadir botones estándar configurador por defecto 0.3
AddButtonEx Añadir botones personalizados 0.3
Install Añade a la página todo el código JS y CSS necesario para que funcione el DataTable 0.4

En la Nefelización del control hemos incluido dos funciones JavaScript que pueden sernos útiles en nuestras APP;

dt_getSelected( dt, e )

Nos retorna las filas que están seleccionadas.
dt = cId del wDataTable
e = Elemento del data que queremos recuperar si se alimento data con un JSon, si no indicamos nada nos retorna la fila completa.

dt_getValues( dt, r )

Nos retorna el valor de las columnas Input y Select. 
dt = cId del wDataTable
r = Índice de la fila a recuperar, si no indicamos nos recupera todas

Podemos utilizar cualquiera de ellas en los aParam de los controles que hacen llamadas a nuestro CGI.

  :AddParam({"seleccion","js:dt_getSelected('mibrowse')"})
  :AddParam({"editables","js:dt_getValues('mibrowse')"})

Agradecimientos

A Joaquim Ferrer Godoy quim_ferrer@yahoo.es por contribuir con este fantástico control a Néfele.

contrib/wdatatable.1692973733.txt.gz · Última modificación: 25/08/2023 14:28 por pedro