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

Les webapps sont devenues une partie essentielle de notre vie numérique. Elles nous permettent de gérer et d’accéder à des informations et des services en ligne. Dans ce contexte, w2UI est un outil puissant qui permet aux développeurs de créer des applications web interactives et intuitives. Dans cet article, nous allons examiner comment w2UI peut être utilisé pour afficher une série de données horodatées à partir d’un fichier de données dans un w2grid. Nous verrons comment configurer le w2grid et comment afficher les données dans le w2grid.

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

Remarquer que le tableau contient 1440 lignes de données tout en restant très fluide…

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 à partir d’un fichier de données texte.

2. Ressources utiles

L’objet w2grid de la librairie Javascript w2UI : http://w2ui.com/web/demo/grid

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

[$[Get Code]]

5. Head : Inclusion des librairies utilisées

[$[Get Code]]

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
« »«
+dataFromFile()+
« « »
] // fin records
}); // w2grid