Logo Mon Club Elec

Webapps d’initiation : w2UI : Afficher dans un w2grid une série de données horodatées

Les webapps sont devenues une partie intégrante de notre vie quotidienne. Elles nous permettent de gérer nos tâches et nos activités de manière plus efficace et plus rapide. Parmi les nombreuses webapps disponibles, w2UI est une application qui offre une variété de fonctionnalités pour afficher des données horodatées dans un w2grid. Cet article explorera en détail les avantages et les fonctionnalités de w2UI et comment il peut être utilisé pour afficher des données horodatées dans un w2grid.

Webapps d’initiation : w2UI : Afficher dans un w2grid une série de données horodatées

Webapps d’initiation : w2UI : Afficher dans un w2grid une série de données horodatées

1.  Présentation

Dans cette webapp d’initiation utilisant un tableau graphique (grid) w2UI, voyons comment afficher une série de valeurs horodatées au format JJ/MM/YYYY HH:MM:SS

2.  Ressources utiles

3.  Structure type de la webapp

Comme cela est présenté dans les tutos dédiés, je rappelle que la structure type de la webapp est la suivante :

  • un seul répertoire incluant :
    • librairies utilisées
    • la page html de la webapp
    • le code serveur Pyduino opérationnel
  • la page HTML de la webapp incluant :
    • la définition des éléments graphique au niveau du body
    • l’inclusion des librairies utilisées
    • le code Javascript actif de la page

4.  Body HTML : définition des éléments graphiques de la page

<div id=« gridDiv » style=« width: 100%; height: 250px; » ></div>

5.  Head : Inclusion des librairies utilisées

<script src=« static/jquery.min.js » type=« text/javascript »></script>
<link href=« static/w2ui/w2ui.min.css » rel=« stylesheet » type=« text/css » />
<script src=« static/w2ui/w2ui.min.js » type=« text/javascript » ></script>

6.  Head : Code Javascript de la page

        $(document).ready(function(){

        // initialisation tableau w2ui grid
        $(‘#gridDiv’).w2grid({ // integre le grid dans le div dedie + parametrage du Grid
                name: ‘grid’,
                header: ‘Données horodatées’,
                show: {
                        toolbar: true,
                        footer: true
                }, // fin show
                multiSearch: true,
                searches: [
                        { field: ‘recid’, caption: ‘ID ‘, type: ‘int’ },
                        { field: ‘date’, caption: ‘Date’, type: ‘date’ },
                        { field: ‘heure’, caption: ‘Heure’, type: ‘text’ },
                        { field: ‘val1’, caption: ‘Valeur’},
                ], // fin search
                columns: [
                        //{ field: ‘recid’, caption: ‘ID’, size: ’20px’},
                        //{ field: ‘date’, caption: ‘Date’, size: ‘120px’, render: ‘date’ },
                        { field: ‘date’, caption: ‘Date’, size: ‘120px’},
                        { field: ‘heure’, caption: ‘Heure’, size: ‘20%’ },
                        { field: ‘val1’, caption: ‘Valeur’, size: ‘30%’ }
                ], // fin columns
                records: [ // les records doit utiliser le memes champs que columns
                        { recid: 1, date: ’06/10/2014′, heure: « 12:05:32 », val1: ‘235’},
                        { recid: 1, date: ’06/10/2014′, heure: « 12:06:32 », val1: ‘240’},
                        { recid: 1, date: ’06/10/2014′, heure: « 12:07:32 », val1: ‘260’},
                        { recid: 1, date: ’06/10/2014′, heure: « 12:08:32 », val1: ‘270’},
                        { recid: 1, date: ’06/10/2014′, heure: « 12:09:32 », val1: ‘287’},
                        { recid: 1, date: ’06/10/2014′, heure: « 12:10:32 », val1: ‘298’},
                        { recid: 1, date: ’06/10/2014′, heure: « 12:11:32 », val1: ‘302’}
                ] // fin records
        }); // w2grid

}); // fin function + fin ready + fin $

7.  La webapp complète :

L’archive complète de la webapp est disponible ici, incluant :

  • La page HTML complète
  • Le serveur Pyduino opérationnel
  • Les librairies utilisées

Remarque : le serveur pyduino suppose que la librairie Pyduino et ses dépendances soient installées.

Noter cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Archive Mon Club Elec

Articles populaires

Newsletter

Inscrivez-vous maintenant et bénéficiez d'un soutien continu pour réaliser vos travaux électriques en toute sécurité.