Fonction JTable JQuery Back-Office

Dans un back-office du moins en ce qui me concerne, nous utilisons et j'utilise des pages composées de formulaire, que ce soit d'ajout, de modification ou que sais je encore.

 

En fait tout dépend comment est fait votre back-office, du moins sont design. Et si en plus vous utilisez la librairie JQuery et JQuery UI avec le fichier d'un thème associé, il devient aisé de mettre en forme ces pages composées de formulaire.
Cela évite de faire un fichier CSS conséquent, car il faudrait telle ou telle classe CSS pour mettre en forme telle ou telle page.

 

Ce que je vous propose, dans cette page, c'est une fonction JavaScript qui une fois appelée dans la page du formulaire quel qu'il soit de le mettre en forme en une seule fois, la seule contrainte, vraiment mineure, c'est d'ajouter la classe au tableau, c'est tout.

 

Ainsi, lorsque vous allez créer vos pages de formulaire, le seul soucis que vous aurez, c'est de créer votre formulaire, et de ne pas penser à ajouter tel ou tel classe pour chaque balise (td, th), mais seulement de créer un formulaire brut.

 

Une fois votre page de formulaire terminée, il vous suffira juste d'ajouter la classe (jtable) au tableau et d'inclure le fichier de la fonction.

La fonction JTable

C'est une page que j'ai nommé (jquery_tableau.php), cette page comporte dans un premier temps l'appel des 3 fichiers (JQuery) de script et css via CDN.
Les 2 lignes suivantes font appel à deux fichiers permettant la mise en forme des champs select.
Les 2 lignes suivantes font appel à deux fichier permettant la mise en forme du champ de formulaire de type file.
Les lignes suivantes est la fonction (jtable).

Je vous propose de télécharger ce fichier rar * Téléchargé ( 103  fois) , qui comprend le fichier de la fonction, une page de démo, et les scripts.

Page de formulaire sans la fonction

Ci-dessous une page contenant un formulaire brut, avec différents éléments (ceci est pour l'exemple), sans la fonction JTable

jtable

Page de formulaire avec la fonction

Ci-dessous la même page contenant le même formulaire avec les mêmes éléments, mais avec la fonction JTable.
La différence est flagrante.

jtable

Conclusion

Voilà j'espére que ce principe de mise en forme de vos pages de formulaire dans votre back-office vous rendra service.
Personnellement j'utilse cette méthode dans mon back-office, ce dernier se compose de plusieurs dizaines de formulaires, et j'avoue que cela me rend vraiment service.
Le fait est que ce fichier comporte l'appel des fichiers de scripts JQuery via CDN, vous pourrez ainsi utiliser des plugins JQuery.

 

Bon dev