Herramientas de usuario

Herramientas del sitio


contrib:wdatatable

wDataTable

Esta clase Néfeliza 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.

Tenemos Néfelizada la versión 1.10.22

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

Funciones JavaScript

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.
Parametro Descripción
dt cId del wDataTable
e Elemento del data que queremos recuperar; si se alimento data es un JSon se indicaremos la clave y si es una array en indice (tenga en cuenta que los array empiezan en 0), si no indicamos nada nos retorna la fila completa.
dt_getValues( dt, r ) -> Nos retorna el valor de las columnas Input y Select. 
Parametro Descripción
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.txt · Última modificación: 08/11/2023 15:38 por pedro