Webapps d’initiation : w2UI : Afficher dans un w2grid de test

Les webapps sont devenues une partie intégrante de notre vie quotidienne et leur importance ne cesse de croître. Les développeurs sont à la recherche de moyens plus efficaces de créer des applications web qui sont faciles à utiliser et à développer. C’est là que w2UI entre en jeu. w2UI est une bibliothèque JavaScript open source qui offre aux développeurs une variété de composants pour créer des applications web. Dans cet article, nous allons examiner comment w2UI peut être utilisé pour afficher des données dans un w2grid de test.

Webapps d’initiation : w2UI : Afficher dans un w2grid de test

1. Présentation

Dans cette webapp d’initiation utilisant un tableau graphique (grid) w2UI, voyons comment afficher un w2grid de test.

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: ‘List of Names’,
show: {
toolbar: true,
footer: true
}, // fin show
multiSearch: true,
searches: [
{ field: ‘recid’, caption: ‘ID ‘, type: ‘int’ },
{ field: ‘lname’, caption: ‘Last Name’, type: ‘text’ },
{ field: ‘fname’, caption: ‘First Name’, type: ‘text’ },
{ field: ’email’, caption: ‘Email’, type: ‘list’, options: { items: [‘peter@gmail.com’, ‘jim@gmail.com’, ‘jdoe@gmail.com’]} },
{ field: ‘sdate’, caption: ‘Start Date’, type: ‘date’ }
], // fin search
columns: [
{ field: ‘fname’, caption: ‘First Name’, size: ‘30%’ },
{ field: ‘lname’, caption: ‘Last Name’, size: ‘30%’ },
{ field: ’email’, caption: ‘Email’, size: ‘40%’ },
{ field: ‘sdate’, caption: ‘Start Date’, size: ‘120px’ }
], // fin columns
records: [
{ recid: 1, fname: « Peter », lname: « Jeremia », email: ‘peter@mail.com’, sdate: ‘2/1/2010’ },
{ recid: 2, fname: « Bruce », lname: « Wilkerson », email: ‘bruce@mail.com’, sdate: ‘6/1/2010’ },
{ recid: 3, fname: « John », lname: « McAlister », email: ‘john@mail.com’, sdate: ‘1/16/2010’ },
{ recid: 4, fname: « Ravi », lname: « Zacharies », email: ‘ravi@mail.com’, sdate: ‘3/13/2007’ },
{ recid: 5, fname: « William », lname: « Dembski », email: ‘will@mail.com’, sdate: ‘9/30/2011’ },
{ recid: 6, fname: « David », lname: « Peterson », email: ‘david@mail.com’, sdate: ‘4/5/2010’ }
] // fin records
}); // w2grid