Diferencias

Muestra las diferencias entre dos versiones de la página.

--- contrib:wdatatable [24/08/2023 15:00]
pedro [Métodos]
+++ contrib:wdatatable [08/11/2023 15:38] (actual)
pedro [wDataTable]
@@ Línea 1: / Línea 1: @@
-======🚧 wDataTable 🚧======
+====== wDataTable ======
 Esta clase Néfeliza el control [[https://datatables.net/|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 [[contrib:wdatatable#Agradecimientos|contribución]] a Néfele.
 ===== Ejemplo de uso =====
-{{url>https://samples.nefele.dev/wiki/wdatatable  100%, 250px}}
+{{url>https://samples.nefele.dev/wiki/wdatatable  100%, 360px}}
 <Code:xailer linenums:1>
+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" },;
+      }
 </Code>
@@ Línea 17: / Línea 49: @@
 |[[propiedades:cId]]    |  Nil  | Identificador único para cada Control |  0.3|
 |cTitle      |       | Texto que aparecerá en la cabecera del control |  0.3|
-|CccClass    |  "compact"  | Clase CSS del la tabla |  0.3|
+|CssClass    |  "compact"  | [[https://datatables.net/examples/styling/|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|
+|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|
+|cSelectStyle   |  "os"   | Define el tipo de [[https://datatables.net/reference/event/selectStyle|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|
@@ Línea 35: / Línea 67: @@
 ^Nombre         ^Descripción                                                                     ^Versión ^
-|[[metodos:datatable:Configure]]  | Este método nos devuelve el objeto JavaScript DataTables que corresponde con la tabla a crear, las propiedades de este objeto están documentadas en la ayuda de [[https://datatables.net/manual/server-side|DataTables.net]]  |  0.3|
+|[[metodos:datatable:Configure]]  | Este método nos devuelve el objeto options del DataTables, las propiedades de este objeto están documentadas en la ayuda de [[https://datatables.net/manual/options|DataTables.net]]  |  0.3|
-|[[metodos:datatable:AddButton]]  | Añadir botones estándar configurador por efecto |  0.3|
+|[[metodos:datatable:AddButton]]  | Añadir botones estándar configurador por defecto |  0.3|
 |[[metodos:datatable:AddButtonEx]]  | Añadir botones personalizados  |  0.3|
 |[[metodos: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.
+<Code:xailer linenums:1>
+  :AddParam({"seleccion","js:dt_getSelected('mibrowse')"})
+  :AddParam({"editables","js:dt_getValues('mibrowse')"})
+</Code>
 ===== Agradecimientos =====
 A Joaquim Ferrer Godoy <quim_ferrer@yahoo.es> por contribuir con este fantástico control a Néfele.

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página