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

Les différentes 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.
Vous trouverez le fichier .json, nommé people.json, dans le dossier 'Downloads' (Téléchargements), son format est le suivant :
JSON
{ 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' },
];
(Base = WebBlogiciel, ObjectStore = people).Voilà ce que cela donne avec Chrome :