EditableGrid, des nouvelles du projet

Posté par Jean-Yves Beaujean (site web personnel) le 24 avril 2012 à 14:45. Édité par Florent Zara, Nÿco et Benoît Sibaud. Modéré par Florent Zara. Licence CC By‑SA.

Étiquettes :

avr.

2012

Il y a un an et demi, j'avais publié ce billet concernant une bibliothèque Javascript nommée Editablegrid. Pour rappel, cette bibliothèque permet de créer facilement des tableaux éditables. C'est l'outil idéal pour gérer des données provenant d'une base de données par exemple.

Depuis la première publication le projet a bien évolué et la bibliothèque s'est enrichie de nouvelles fonctionnalités, entre autres grâce aux retours des utilisateurs. Mais il y a un autre grand changement : la licence. Le projet est désormais publié sous double licence MIT et GPL afin de permettre son utilisation dans des projets non-GPL.

Concernant les nouveautés principales, nous pouvons citer :

la pagination côté client,
le support automatique des date pickers pour les formats date si jQuery UI est détecté,
le support des "option groups" dans les listes,
le support du JSON (en plus du XML),
le stockage des paramètres de tri, de filtre et de pagination côté client (utilise localStorage ou les cookies si localStorage n'est pas supporté par le navigateur).

Nous avons également mis en place un site complet dédié au projet. Ce site reprend plusieurs exemples, du plus simple au plus complet, qui vous aideront à prendre en main la bibliothèque.

Aller plus loin

EditableGrid (1420 clics)
Téléchargement sur Github (108 clics)
Démonstration d'Editable Grid (1250 clics)

# commercial != propriétaire

Posté par Thomas Preud'homme le 24 avril 2012 à 14:56. Évalué à 9.

Il vaudrait mieux parler de projets propriétaire/privateur dans l'article. La GPL n'empêche en aucune façon les projets commerciaux.
- [^] # Re: commercial != propriétaire
  
  Posté par Jonathan ILIAS-PILLET (site web personnel) le 24 avril 2012 à 17:00. Évalué à 0.
  
  Et accessoirement, je me demande l'intérêt de poursuivre aussi la diffusion sous licence GPL. Plus restrictive que la licence MIT, qui va choisir cette option ?
  - [^] # Re: commercial != propriétaire
    
    Posté par lolop (site web personnel) le 24 avril 2012 à 20:13. Évalué à 7.
    
    Quelqu'un qui veut mettre son développement sous GPL par exemple.
    
    Votez les 30 juin et 7 juillet, en connaissance de cause. http://www.pointal.net/VotesDeputesRN
  - [^] # Re: commercial != propriétaire
    
    Posté par Jean-Yves Beaujean (site web personnel) le 24 avril 2012 à 20:26. Évalué à 4.
    
    En fait, je trouve les licences trop compliquées. Au départ, on avait choisi GPL. Ca semblait embêter certains utilisateurs qui voulaient utiliser EditableGrid dans leur projet commerciaux. Donc, on s'est dit que MIT était plus approprié. Et puis, on a vu que jQuery proposait MIT et GPL. On a fait comme eux…
    - [^] # Re: commercial != propriétaire
      
      Posté par Zenitram (site web personnel) le 24 avril 2012 à 23:36. Évalué à 9.
      
      Ca semblait embêter certains utilisateurs qui voulaient utiliser EditableGrid dans leur projet commerciaux.
      
      quitte à répéter : commercial != propriétaire
      
      Ca semblait embêter certains utilisateurs qui voulaient utiliser EditableGrid dans leur projet propriétaires.
      on peut très bien faire des projets commerciaux gpl (si on respecte la gpl)
      
      après, oui la gpl est compliquée, et surtout empèche les projets propriétaires (c'est voulu). c'est un choix compréhensible, et MIT est un bon choix (c'est simple!). mais ça n'a rien à voir avec le commercial ou pas commercial, seulement un type de commercial (le propriétaire).
      - [^] # Re: commercial != propriétaire
        
        Posté par reno le 25 avril 2012 à 13:34. Évalué à 2.
        
        on peut très bien faire des projets commerciaux gpl (si on respecte la gpl)
        
        Si on vend autre chose que le logiciel oui, ou alors il faut vendre le logiciel à un seul client (logiciel spécifique) ou très peu cher (autrement un acheteur peut te couper l'herbe sous le pied en revendant lui-même ton logiciel).
        Tu oublie juste de préciser ce "petit" point.
        
        Donc beaucoup de projets commerciaux classiques (vendre du logiciel "pur") sont peu compatibles avec les licences open sources.
- [^] # Re: commercial != propriétaire
  
  Posté par Benoît Sibaud (site web personnel) le 25 avril 2012 à 11:41. Évalué à 2.
  
  Précision ajoutée dans la dépêche.
  - [^] # Re: commercial != propriétaire
    
    Posté par Zenitram (site web personnel) le 25 avril 2012 à 12:57. Évalué à 4.
    
    Tu as mis :
    
    afin de permettre son utilisation dans des projets commerciaux non-GPL.
    
    Sauf que ça n'a toujours rien à voir : commercial ou pas, le problème est le même! Ca n'a rien à voir. Ca mélange choux et carottes. Qu'est-ce que vient faire le mot "commerciaux" ici?
    Avant, l'utilisation n'était pas possible avec des projets non-commerciaux non-GPL aussi (ben oui… La GPL empêchait de faire du libre non-commercial sous BSD par exemple)
    
    La formulation serait : "afin de permettre son utilisation dans des projets non-GPL."
    
    Faudrait arrêter un jour de parler de commercial/non-commercial dans ces cas-la, car c'est juste mélanger choux et carottes. La GPL est problématique autant pour le commercial que pour le non-commercial, et autant pour le libre que le non-libre.
    - [^] # Re: commercial != propriétaire
      
      Posté par Benoît Sibaud (site web personnel) le 25 avril 2012 à 13:10. Évalué à 3.
      
      On peut supposer qu'il n'y a eu des demandes que de « projets commerciaux non-GPL ». D'où le fait qu'il ait écrit initialement « projets commerciaux ». Théoriquement je suis d'accord que c'est valable aussi pour des projets non-commerciaux non-GPL aussi, mais le cas ne s'est sans doute pas présenté ou n'a pas été suffisamment marquant car il n'a pas été mentionné par l'auteur initial. Ceci étant dit, quitte à clarifier, autant mettre « projets non-GPL ».
# Bugs?

Posté par skety le 24 avril 2012 à 15:09. Évalué à 3.

Deux retours d'utilisation rapide de la "full demo" ( http://www.editablegrid.net/editablegrid/examples/full/index.html )
Dans les champs age, on peut mettre la valeur 15, alors qu'il est indiqué que ça commence à partir de 16.
De plus, toujours dans la colonne age, si on entre une valeur incorrect (10 par exemple), la case devient rouge. Jusque là, normal.
Si on corrige la valeur en mettant, par exemple, 16, la case revient au blanc. Le problème apparait lorsque l'on clique ailleurs dans l'application, la case reste toujours éditable. Cela ne se produit pas quand on entre la bonne valeur du premier coup.
J'espère avoir été clair :)

Pour info, j'utilise un Firefox 11.0 sur Windows XP. Et désolé de poster là et de ne pas avoir pris le temps de regarder s'il y avait un bugtracker.
- [^] # Re: Bugs?
  
  Posté par Louis Antoine (site web personnel) le 24 avril 2012 à 16:52. Évalué à 3.
  
  Merci pour le retour. Le bug de la case qui reste éditable quand on clique ailleurs sur la page, malgré que la valeur a été corrigée, est désormais corrigé sur le repository GitHub.
  - [^] # Re: Bugs?
    
    Posté par Thrillseeker le 25 avril 2012 à 10:48. Évalué à 1.
    
    Pour Chrome 18 et Firefox 12 sur WinXP, il y a un bug d'affichage sur la page d'accueil (voir ici) qui n'est pas présent dans la "full demo". La zone d'édition pour certaines colonnes est décalée à droite et empiète sur la colonne voisine.
# Dans la veine de feu dabbledb

Posté par Damien Cassou le 24 avril 2012 à 15:48. Évalué à 2.

Ce projet va dans la direction de dabbledb qui a malheureusement fermé ses portes depuis 1 an (racheté par Twitter). Une vidéo montre les capacités qu'avait dabbledb. Par exemple, les bases de données avaient plusieurs tables qui pouvaient se référencer ce que ne semble pas encore permettre EditableGrid. dabbledb permettait aussi d'avoir des vues sous forme de cartes pour les données de type adresses. dabbledb permettait aussi de grouper des éléments dans les vues : par exemple, dans le cas d'une table Livres, je pouvais voir toutes les lignes d'un auteur regroupées avec le nom de l'auteur au-dessus (et donc sans colonne 'auteur' ce qui rend la lecture plus agréable). dabbledb me manque et j'espère que EditableGrid ira dans le même sens.

Il ne me semble pas avoir dit que dabbledb était implémenté en Smalltalk avec le framework web Seaside :-).
# ca m'interesse mais avec mysql

Posté par NeoX le 24 avril 2012 à 16:29. Évalué à 2.

je voudrais interagir avec une base de données mysql.

dois-je alors interroger ma base de données (une table une particulier)
pour la sortir en json ou xml la traiter avec votre outil

puis faire un bouton validation qui relit le json ou le xml pour injecter les modifs dans la base ?
- [^] # Re: ca m'interesse mais avec mysql
  
  Posté par Louis Antoine (site web personnel) le 24 avril 2012 à 17:13. Évalué à 6.
  
  EditableGrid est un composant Javascript de tableaux éditables à usage générique. Il n'est en aucun cas limité à l'édition de données venues d'une base de données, et encore moins lié à un SGBD particulier.
  
  Cela dit, nous l'utilisons dans toutes nos applications pour éditer des données qui sont stockées dans des DB MySQL. En effet, il faut qu'une URL sorte les données de la DB au format JSON ou XML. Si vous travaillez avec PHP, la classe EditableGrid.php facilite ce travail (via les méthodes renderXML et renderJSON). La démo "full" montre l'utilisation de cette classe (ici pour exposer le contenu d'un fichier CSV en XML ou JSON, mais modifier ce code pour exposer le contenu d'une base de données est facile).
  
  EditableGrid permet ensuite d'enregister un callback appelé quand une valeur est modifiée: c'est là qu'on peut aller modifier la valeur dans la DB MySQL via une action Ajax implémentée par exemple en PHP.
  
  Voir aussi: http://www.editablegrid.net/page/en/15/faq.html
  - [^] # Re: ca m'interesse mais avec mysql
    
    Posté par NeoX le 24 avril 2012 à 17:29. Évalué à 2.
    
    ca y est j'ai mis les mains dedans ;)
    
    beau travail
  - [^] # Re: ca m'interesse mais avec mysql
    
    Posté par barmic le 24 avril 2012 à 20:54. Évalué à 3.
    
    EditableGrid permet ensuite d'enregister un callback appelé quand une valeur est modifiée: c'est là qu'on peut aller modifier la valeur dans la DB MySQL via une action Ajax implémentée par exemple en PHP.
    
    Par callback tu parle d'une méthode javascript (ou d'un listener pour faire de l'objet) ?
    Ce serait cool d'avoir simplement un appel REST, non ? (je dis ça c'est juste pour donner une idée, moi pour ce que je fait du web).
    
    Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)
    - [^] # Re: ca m'interesse mais avec mysql
      
      Posté par NeoX le 24 avril 2012 à 21:07. Évalué à 5.
      
      de ce que j'ai pu voir cet apres midi en faisant mes tests le callback existe deja "modeleChange()"
      
      dedans on lui met ce qu'on veut,
      par definition du javascript,
      mais celui-ci peut appeler ce qu'il veut, et dans l'exemple, on demande à ajax d'appeler fichier php en POST.
      
      il me reste la sortie du PHP et le retour au javascript à gerer (il ne fait pas le rafraichissement de l'affichage, alors que la base est bien modifiée)
      - [^] # Re: ca m'interesse mais avec mysql
        
        Posté par Jean-Yves Beaujean (site web personnel) le 24 avril 2012 à 22:20. Évalué à 1.
        
        C'est exactement ça !
      - [^] # Re: ca m'interesse mais avec mysql
        
        Posté par Louis Antoine (site web personnel) le 25 avril 2012 à 08:40. Évalué à 2.
        
        il me reste la sortie du PHP et le retour au javascript à gerer (il ne fait pas le rafraichissement de l'affichage, alors que la base est bien modifiée)
        
        Le principe est que quand la cellule est modifiée dans EditableGrid, l'affichage est tout de suite mis à jour et modelChanged appelé. Donc, il n'y a rien à faire après l'appel au PHP, si ce n'est éventuellement donner un feedback visuel à l'utilisateur que sa modif à bien été faite sur le serveur (genre highlighter la ligne en vert), ou si jamais une erreur s'est produite sur le serveur, remettre l'ancienne valeur (c'est ce que fait le code sur http://www.editablegrid.net/page/en/15/faq.html si la réponse du PHP n'est pas "ok", mais c'est juste un exemple bien entendu).
        
        Donc quand tu dis "il ne fait pas le rafraichissement de l'affichage", je me demande si ce n'est pas plutôt l'ancienne valeur qui est remise à cause d'une mauvaise réponse du PHP.
        
        [^] # Re: ca m'interesse mais avec mysql
        
        Posté par NeoX le 25 avril 2012 à 10:22. Évalué à 3. Dernière modification le 25 avril 2012 à 10:35.
        
        Donc quand tu dis "il ne fait pas le rafraichissement de l'affichage", je me demande si ce n'est pas plutôt l'ancienne valeur qui est remise à cause d'une mauvaise réponse du PHP.
        
        Merci Louis, oui c'est exactement ca, faut dire que j'ai quand meme fait un violent copier/coller de l'exemple, mais que j'ai pas encore compris comment mon PHP doit dire à javascript que la reponse est OK.
        
        ce qui change dans le code javascript de demo.js (copier/coller de l'exemple)
        
        // register the function that will handle model changes modelChanged = function(rowIndex, columnIndex, oldValue, newValue, row) { displayMessage("Value for '" + this.getColumnName(columnIndex) + "' in row " + this.getRowId(rowIndex) + " has changed from '" + oldValue + "' to '" + newValue + "'"); if (this.getColumnName(columnIndex) == "continent") this.setValueAt(rowIndex, this.getColumnIndex("country"), ""); // if we changed the continent, reset the country this.renderCharts(); };
        
        DEVIENT ==>>
        
        // register the function that will handle model changes modelChanged = function(rowIndex, columnIndex, oldValue, newValue, row) { // --- Start of modification to add ajax mysql script $.ajax({ url: "update_grid_cell.php", type: 'POST', dataType: "text", data: { id: editableGrid.getRowId(rowIndex), column: columnIndex, value: newValue }, success: function (response) { // reset old value if failed if (response != "ok") editableGrid.setValueAt(rowIndex, columnIndex, oldValue); // here you could also highlight the updated row to give the user some feedback }, error: function(XMLHttpRequest, textStatus, exception) { alert(XMLHttpRequest.responseText); } }); //--- end of modification displayMessage("Value for '" + this.getColumnName(columnIndex) + "' in row " + this.getRowId(rowIndex) + " has changed from '" + oldValue + "' to '" + newValue + "'"); if (this.getColumnName(columnIndex) == "continent") this.setValueAt(rowIndex, this.getColumnIndex("country"), ""); // if we changed the continent, reset the country this.renderCharts(); };
        
        et mon code PHP est le suivant :
        
        // le code au dessus prepare une requete de mise à jour avec les données precedemment transmise, et je teste le retour de la requete pour tenter de transmettre une info à javascript $res=$bdd->exec($req); if($res === FALSE) { die('erreur dans la requete'); } else if($res === 0) { return "nok"; } else { return "ok"; }
        
        peut-etre faut-il que je mette du code javascript dans mon php pour modifier la variable "response" qui sera utilisée dans demo.js ?
        
        ah, et une autre remarque, qui peut etre une piste d'amelioration, c'est dommage de devoir coder les colonnes en dur dans le javascript alors qu'il pourrait le lire depuis le xml
        
        ex : je ne veux pas des colonnes age/height dans mon site,
        je ne les mets pas dans le xml
        mais je dois modifier le javascript pour ne plus avoir d'erreur
        alors qu'on devrait pouvoir parser le xml pour calculer les colonnes et les valeurs des champs par defaut (liste de reponse)
        
        [^] # Re: ca m'interesse mais avec mysql
        
        Posté par Louis Antoine (site web personnel) le 04 mai 2012 à 12:31. Évalué à 1.
        
        Hello, d'abord sorry pour la réponde tardive.
        
        Ton PHP doit écrire en sortie "ok" ou "nok" (echo "ok"), c'est ça qui sera reçu par le Javascript et accessible via "response".
        
        Un exemple simple d'édition d'une DB MySQL via EditableGrid sera disponible d'ici ce soir dans la section Download de GitHub.
        
        Pour ce qui est de "devoir coder les colonnes en dur dans le javascript", je ne comprends pas ce que tu veux dire: les colonnes (et le cas échéant, les valeurs possibles des listes) sont déclarées dans les "metadata" en XML (ou JSON). Elles peuvent aussi être déclarées en Javascript.
        
        Mais bien entendu, si ton Javascript affecte par exemple un renderer spécifique à une colonne, et que cette colonne n'existe pas, il râle, ça me parait logique. Il est possible de tester la présence d'une colonne avec grid.hasColumn("age"), si certaines colonnes sont présentes ou non dans les metadata selon le contexte (par exemple les autorisations du user connecté).
        
        Si tu as d'autres questions, merci de nous contacter via le forumaire sur le site www.editablegrid.net.
        
        a+
# Comparaison

Posté par ckyl le 25 avril 2012 à 08:50. Évalué à 6.

Il existe une comparaison fonctionnelle avec les autres implémentations de grid ? Genre page 12 et 13 ici http://www.slideshare.net/sitepen/dgrid-next-generation-dojo-grid Ou un retour d'expérience d'utilisateurs ?

Par exemple en regardant les démos j'ai pas vu de lazy loading, pas de scrolling, pas de navigation clavier, pas de focus, pas de retaillage des colonnes etc. Pas vu non plus si ca supportait le rtl et le bidi. J'ai raté quelque chose ?

Le problème des grids en JS, c'est dès que tu commences à les utiliser un peu sérieusement tu arrives assez vite aux limites et ça devient de la voltige.
# Vous avez prévu ...

Posté par syj le 25 avril 2012 à 08:54. Évalué à 2.

Bonjour,

Avez vous prévu de permettre le remplissage de cellule à la manière de LibreOffice Calc via les étirements de cellules.

C'est à dire, on étire le bord d'une cellule et cela écrase les valeurs des cellules recouvertent ? Avec éventuellement , une règle à étirements (incrémentation pour les nombres et les dates, copie pour les string, …) ?

Cela rendrait l'outil indispensable.
- [^] # Re: Vous avez prévu ...
  
  Posté par Jean-Yves Beaujean (site web personnel) le 25 avril 2012 à 15:42. Évalué à 2.
  
  Ce n'est pas prévu, mais nous allons y réfléchir. C'est un beau challenge. Dans une application web, ce ne sera pas facile. J'ai codé cette fonctionnalité sur des JTable en Java, ça n'avait rien de compliqué. Mais dans une page web… A essayer…
  - [^] # Re: Vous avez prévu ...
    
    Posté par syj le 26 avril 2012 à 09:08. Évalué à 1.
    
    Pour avoir conçu différents outils de gestion de planning, je sais que les utilisateurs cherchent typiquement ce genre de fonctionnalités :
    Étirer les jours de vacances, les jours d'arrêt maladie…
    
    Enfin , je conçois bien qu'il y a du challenge.
# Comparaison Slickgrid

Posté par ledom le 25 avril 2012 à 11:11. Évalué à 1.

Serait-il possible d'avoir une comparaison avec slickgrid qui parait bien plus avancé (bien adapté aux tableau de grande dimension) et dispose d'intégrations comme par exemple un module drupal ?
# wiki ?

Posté par Nicolas Boulay (site web personnel) le 25 avril 2012 à 14:58. Évalué à 2.

Si on prend un moteur de wiki, il serait possible d'ajouter cette visualisation dans l'édition et ensuite d'ajouter les graphiques sur la page publique ?

Je rêve d'une application pour présenter des études avec les données vérifiables par derrière.

"La première sécurité est la liberté"

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.