C'est un clin d'oeil à la revue Hebdogiciel, célèbre en son temps, qui proposait aux programmeurs en herbe, et aux autres, des programmes très simples et fonctionnels. Là plus question de Sinclair, Atari ou Commodore mais plutôt de PC, de Windows et des langages qui permettent de développer sur cette plateforme.
Après m'être essayé à C++ Builder puis à Qt, j'ai découvert le plaisir de programmer avec des outils simples et... gratuits. Un éditeur de texte (Notepad++), un navigateur (Chrome), du HTML 5, du CSS 3, du JavaScript et des bibliothèques JavaScript comme w2ui (Version 1.5.rc1) ou jQuery.
En ce qui concerne les navigateurs supportés ça marche avec Chrome, Opéra et Firefox, je ne les ai pas tous testés, mais il est peu probable qu' IE fonctionne.

Prérequis

Vous allez avoir besoin d'un fichier .json (au format approprié) et d'une base de données locale IndexedDB pour tester les différentes grilles, créez les en cliquant

Vous trouverez le fichier .json, nommé people.json, dans le dossier 'Downloads' (Téléchargements), son format est le suivant :
JSON
var people = [
    { recid: 1, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    { recid: 2, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    { recid: 3, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    { recid: 4, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    { recid: 5, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    { recid: 6, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    { recid: 7, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    { recid: 8, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    { recid: 9, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    { recid: 10, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
];
Le format du fichier .json est ultra simple et fonctionne très bien avec IndexedDB et w2ui. Il s'agit tout simplement d'un tableau d'objets.

Et pour voir la base de données et son contenu vous aurez besoin d'ouvrir la console de votre navigateur
(Base = WebBlogiciel, ObjectStore = people).Voilà ce que cela donne avec Chrome :

console

Les différentes manières de créer une grille w2ui

Il existe (à ma connaissance) deux manières de créer une grille w2ui.
La première est très simple et permet de créer une grille rapidement mais sans perdre de sa puissance ni de ses nombreuses possibilités de personnalisation, la seconde est un peu plus sophistiquée car elle permet en plus de la grille de gérer l'ensemble des objets qui composent la librairie.

Importer un fichier .json local dans une grille w2ui

Ajouter une fonction de sauvegarde en local (.json) des données d'une grille w2ui

Importez un fichier .json, ajoutez-y des enregistrements, sauvegardez. La grille va se vider, réimportez le fichier que vous venez de sauvegarder et constatez que la sauvegarde a bien pris en compte les nouveaux enregistrements.

Comment personnaliser les headers de colonnes dans une grille w2ui

Démo de SortableJS, réordonner une liste de menus par drag-and-drop

Créer son propre menu contextuel avec HTML et Javascript

Cliquez dans la boîte avec le bouton droit de la souris

Importer un fichier .json local dans une table (ObjectStore) IndexedDB

Choisissez un fichier .json (people.json) à importer, dans votre dossier 'Téléchargements', s'il n'y en à pas créez en un
La grille est simplement là pour refléter le contenu de l'ObjectStore.




Sauvegarder en local (dans un fichier .json) les données d'une base IndexedDB

Vérifiez avec la console de votre navigateur la présence d'une base de données IndexedDB nommée 'WebBlogiciel' et de son Objectstore 'people', si vous ne la voyez pas créez la
La grille est simplement là pour refléter le contenu de l'ObjectStore.