Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
contrib:wdatatable [24/08/2023 14:48] 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. | 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. | Ha sido realizada como una [[contrib:wdatatable#Agradecimientos|contribución]] a Néfele. | ||
+ | |||
+ | |||
===== Ejemplo de uso ===== | ===== 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> | <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> | </Code> | ||
Línea 17: | Línea 49: | ||
|[[propiedades:cId]] | Nil | Identificador único para cada Control | 0.3| | |[[propiedades:cId]] | Nil | Identificador único para cada Control | 0.3| | ||
|cTitle | | Texto que aparecerá en la cabecera del 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| | |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| | |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| | |lButtonCSV | .F. | Habilita el botón de exportar a CSV | 0.3| | ||
|lButtonExcel | .F. | Habilita el botón de exportar a EXCEL | 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| | |lButtonPrint | .F. | Habilita el botón de Imprimir | 0.3| | ||
|lSelectable | .F. | Habilita la selección de filas | 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| | |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| | |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 ^ | ^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: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| | |[[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 ===== | ===== Agradecimientos ===== | ||
A Joaquim Ferrer Godoy <quim_ferrer@yahoo.es> por contribuir con este fantástico control a Néfele. | A Joaquim Ferrer Godoy <quim_ferrer@yahoo.es> por contribuir con este fantástico control a Néfele. |