Créer et centrer des informations dans un tableau. Suite à mon post Facebook, je rédige un article pour profiter d’une meilleure mise en page.
Mais également, pour que cela apporte une meilleure visibilité pour aider un maximum de personnes.

maj 29/11/2020 : Merci à @kiboost , @mld.sebastien, @bison sur le forum de jeedom. Qui ont apporté une solution lors d’un soucis de latence dans la création des objets. Le centrage ne se faisait pas

Les tableaux sous Jeedom Créer et centrer des informations dans un tableau

Jeedom permet de créer des tableaux pour organiser ses données. Cela est très pratique. On peut choisir de rendre le tableau transparent pour l’utilisateur en masquant ses lignes.

Comment créer un tableau sous Jeedom ? Créer et centrer des informations dans un tableau

Pour chaque équipement (ou virtuel), il existe un bouton configuration avancé en haut à droite.

Il faut alors se rendre dans l’onglet disposition
Dans la liste déroulante « Disposition », il faut alors sélectionner Tableaux.

Lorqu’on sélectionne tableau de nouveaux apparaissent.
Il demande le nombre de ligne du Tableau et le nombre de colonnes.

La mise en forme du Tableau

Après avoir défini le nombre de lignes et de colonnes, dès que l’on clique sur enregistrer, les cases correspondent apparaissent dans la page.
Ici : 2 colonnes et 3 lignes

Pour chaque case, on peut mettre :

du texte (case : Texte de la case)

• glisser/déposer les différentes infos/commandes visibles de l’équipement (ici : état, haut, bas ; stop, positionnement)

• décider de la mise en forme de la case avec le langage CSS ( couleur de l’écriture,police d’écriture, couleur de fond de la case, mise en gras ……)

Résultat :

Centrer le titre

Quand je regarde mon tableau, j’aimerais centrer le titre de celui-ci.
Jeedom ne propose pas nativement de solution pour faire ça (surprenant même), comment faire ?
Dans le dashboard, quand on va en modification (petit bouton en haut à droite ) :
Les cases du tableau apparaissent temporairement.

On voit bien que le titre prend toute la cellule.
Il faudrait soit :
– que le titre chevauche les deux cellules du haut
– soit fusionner les cellules pour en faire qu’une seule
1ère solution : Chevaucher le texte sur les 2 cellules :
On ajuste en pixel : la position du titre
position: relative; top: 0px; left: 90px;
Ici, on dit que le texte commence à 90 pixels du bords
(il faut changer la valeur 90 pour ajuster en tâtonnant)

Résultat (pas parfait, faut peut-etre que je mette 89,88,87 …. 84 etc .. à tester) :

Résultat avec les lignes du tableau (on voit le chevauchement) :

Avantage :
– faciliter de mise en œuvre (1 ligne dans une case)
Inconvénient :
– la configuration se fait à la vue (en tâtonnant sur le nombre de pixels)
– si on utilise Jeedom sur plusieurs appareils avec des résolutions différentes : le résultat ne sera pas le même
– si pour X raison, je vais changer la taille de mes colonnes : je dois tâtonner de nouveau pour trouver le centrage parfait

2ème solution : fusionner les cellules et centrer le texte dedans :
C’est une solution plus technique mais qui est plus efficace.
1^ère étape :
Ajouter du code CSS dans le texte que l’on veut centrer :
text-align: center;column-span:all;

2^ème : configuration avancée
Il faudra ajouter du code Javascript qui va supprimer les cases inutiles et étendre la case sur tout le tableau

maj du 29/11/2020 : ajout d’un délai avant de lancer les opérations de centrage ici , c’est 100 ms … ne ps hésiter à mettre 200 ou plus si vous avez toujours le soucis

$(function() { $(‘body’).on(‘jeedom_page_load’, function (event) { setTimeout(function() { addColspan($(“TD”)) }, 100) }) })

function addColspan(Tabobjets) {

Tabobjets.each(function(objet) {

if ($(this).css(“column-span”) != undefined)

{

if ($(this).css(“column-span”) === ‘all’)

{

console.log(‘test’);

var nbtd = $(this).siblings().length + 1;

$($(this).siblings()).remove();

$(this).attr(‘colspan’,nbtd);

}

}

});

};

En n’oubliant pas d’enregister les changements

3^ème étape : raffraichir le cache du navigateur

Rendez vous sur votre dashboard. Avec votre clavier :
Faire touche CTRL + F5 ( ou CTRL + Maj + R), la page va se recharger et prendre en compte les changements.
Résultats:

Avantage :
– s’adapte à toutes les résolutions
– on est sûr que notre titre est bien centré
– on peut modifier la taille des colonnes, le texte restera centrer
Inconvénient :
– fastidieux à mettre en œuvre la 1^ère fois

maj du 29/11/2020 : Si vous voulez appliquer le code dans un désign mettre ce code dans l’icone qui amène à la page

<a onClick=”planHeader_id=10; displayPlan(); $(‘body’).trigger(‘jeedom_page_load’);”><li class=”monmenu selected”><div class=”imagette”><img src=”montheme/images/icon_home.png” height=50px width=50px></div></br></li></a>

Bonus : Comprendre le code Javascript

maj du 29/11/2020 $(function() { $(‘body’).on(‘jeedom_page_load’, function (event) { setTimeout(function() { addColspan($(“TD”)) }, 100) }) })

Après le chargement de la page. On laisse une légère temporisation pour laisser le temps aux éléments de se charger avant d’appeler la fonction addColspan($(“TD”)) (on aurais pu l’appeler comme on veut).

$(“TD”) : veut dire qu’on lui passe un tableu avec toutes les balises TD HTML de la page (ces balises définissent les cases d’un tableau).

unction addColspan(Tabobjets) {

Tabobjets.each(function(objet) {

if ($(this).css(“column-span”) != undefined)

{

if ($(this).css(“column-span”) === ‘all’)

{

console.log(‘test’);

var nbtd = $(this).siblings().length + 1;

$($(this).siblings()).remove();

$(this).attr(‘colspan’,nbtd);

}

}

});

};

Dans cette fonction, on récupère ce fameux tableau qu’on appelle TabOjets
Tabobjets.each(function(objet) => on parcourt chaque ligne de ce tableau.

if ($(this).css(“column-span”) != undefined)
Dans chaque ligne, on ne prend que les lignes ou il y a la propriété column-span (celle que je vous ais fait ajouter plus haut)

if ($(this).css(“column-span”) === ‘all’)
On vérifie ensuite si la valeur de column-span est bien all

Si les 2 conditions sont réunies :

console.log(‘test’); => ne sert à rien … c’est juste un test

var nbtd = $(this).siblings().length + 1; => on regarde le nombre de cases qu’il y a dans cette même ligne (siblings veut dire : frère et sœurs … pour le coup, on rajoute +1 pour compter la case en elle-même)

$($(this).siblings()).remove(); => on supprime tous les frèeres et soeurs de cette case ( en gros, toutes les cases d’à coté)

$(this).attr(‘colspan’,nbtd); => on dit que notre case va prendre la place du nombre de cases calculé juste au dessus.

Cette article provient d’Oliver L. membre du groupe Entraide Jeedom