Centrer du texte dans un tableau (colspan?)

Bonjour à toi comme promis, je confirme que cela fonctionne donc je récapitule :

Le code à mettre dans paramètre avancée JavaScript :

function addColspan(_tabObjects) {
	if (!_tabObjects) return
	var nbtd
	_tabObjects.each(function() {
		if ($(this).css("column-span") != undefined)
		{
			if ($(this).css("column-span") === 'all')
			{
				nbtd = $(this).siblings().length + 1
				$($(this).siblings()).remove()
				$(this).attr('colspan', nbtd)
			}
		}
	})
}

$(function() {
  $('body').on('jeedom_page_load', function (event) {
   setTimeout(function() {
		addColspan($("TD"))
	}, 100)
  })
})	

Rajouter dans configuration de l’équipement Disposition sélectionner tableau et mettre column-span:all;
sur la ligne qu’on veux fusionner.

Résultat dashboard ou vues:
image

Résultat Design :
image

Attention ceux qui utilise le menu F$B33 de @Salvialf faut rajouter ceci dans le lien du menu
$(‹ body ›).trigger(‹ jeedom_page_load ›);

Exemple :

<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>

Pour ceux qui utilise le menu F$B33 de @noodom menu json Frame, dans le fichier html a inserer dans html Display dans la partis menu rajouter cela $(‹ body ›).trigger(‹ jeedom_page_load ›); dans cette partis du code ci-dessous :

if (frameDestination == null) {
			// no frame : page redirection
			planHeader_id = id;
			displayPlan();
			$('body').trigger('jeedom_page_load');

Le code $(‹ body ›).trigger(‹ jeedom_page_load ›); peut-être mieux le positionner.

Merci beaucoup à @olivvv59 pour son code d’origine !
Merci beaucoup à @kiboost pour son intervention et aide.
Merci à @salvitaf et @noodom pour leur exellent menu.

Merci à tous.

J’espère que j’oublie rien.

Sa serait bien que ce code sois présent dans jeedom ou une option pour le faire dessus cela serait peut être beaucoup mieux.

1 « J'aime »

Merci pour le récapitulatif.

J’ai contacté un admin ce matin pour la maj de Youdom.

Y a plus qu’a trouver un créneau avec lui :slight_smile:

Bonjour à tous,

J’ai lu attentivement vos explications et j’ai appliqué ça sur mes titres… Au top!
J’ai voulu aller un peu plus loin en essayant de bidouiller le javascript mais sans succès, pensez vous que l’on pourrait faire un « else » qui permettrait d’appliquer un nombre pour par exemple ne fusionner que deux cellules?

Bonne journée!

Hello,

je suis trop fatigué ce soir.
Je regarderais demain, pour trouver une solution, si tu n’as pas trouvé d’ici la :wink:

Et ce qui serait sympa aussi c’est de fusionner en vertical :stuck_out_tongue_winking_eye:

Hello,

voila, j’ai ajouté un bloc pour gérer la fusion en mettant les cellules :

if ($(this).css("grid-column-start") != undefined)
          {
            	
                var nb = $(this).css("grid-column-start");
            	if ($(this).css("grid-column-start") != 'auto' && $(this).css("grid-column-start") != '')
          		{
                  
                  	for(let i=1;i<nb;i++)
                    {
                      //debugger
                      $($(this).next()).remove();
                    }
                  	$(this).attr('colspan',nb);
                
                }
                  
                               
          }

on passe maintenant par la propriété : grid-column-start

(dans la propriété column-span , on ne peut pas passer de chiffres)

Par contre, c’est toujours de la bidouille. on détourne des attributs css de leur utilisation.
Mais ça devrait fonctionner.

dit moi, si c’est ok de ton coté.

EDIT : au final, c’est plus flexible que la première méthode.

Je regarde mais c’est plus compliqué à gérer.


ajoute cette condition dans le code précèdent (celui d'origine) :
 if ($(this).css("grid-row-start") != undefined)
          {
            	
                var nb = $(this).css("grid-row-start");
            	var idTD = $(this).index();
            	if ($(this).css("grid-row-start") != 'auto' && $(this).css("grid-row-start") != '')
          		{
                  
                  	var elt = $(this).parent('tr'); 
                  	for(let i=1;i<nb;i++)
                    {
                      elt = elt.next();
                      elt.children()[idTD].remove();
                    }
                  	$(this).attr('rowspan',nb);
                
                }
                  
                               
          }

j’ai utilisé grid-row-start

sans :

avec :

dit moi, si c’est ok de ton coté.

voila le code avec les 2 ajouts :

function addColspan(Tabobjets) {
  		
  		//console.log('fonction');
  		Tabobjets.each(function(objet) {
          
          if ($(this).css("column-span") != undefined)
          {
            	//console.log('column-span');
           		if ($(this).css("column-span") === 'all')
          		{
           			//console.log('column-span== all');
                    var nbtd = $(this).siblings().length + 1;
                  	$($(this).siblings()).remove();
                    $(this).attr('colspan',nbtd);        
          		} 
            	
                               
          }
          
          if ($(this).css("grid-column-start") != undefined)
          {
            	
                var nb = $(this).css("grid-column-start");
            	if ($(this).css("grid-column-start") != 'auto' && $(this).css("grid-column-start") != '')
          		{
                  
                  	for(let i=1;i<nb;i++)
                    {
                      //debugger
                      $($(this).next()).remove();
                    }
                  	$(this).attr('colspan',nb);
                
                }
                  
                               
          }
          
          if ($(this).css("grid-row-start") != undefined)
          {
            	
                var nb = $(this).css("grid-row-start");
            	var idTD = $(this).index();
            	if ($(this).css("grid-row-start") != 'auto' && $(this).css("grid-row-start") != '')
          		{
                  
                  	var elt = $(this).parent('tr'); 
                  	for(let i=1;i<nb;i++)
                    {
                      elt = elt.next();
                      elt.children()[idTD].remove();
                    }
                  	$(this).attr('rowspan',nb);
                
                }
                  
                               
          }
          
          
         
          
          
          
          
        });
        
};

Je prends en bloc ce code dans la perso et je fais le test

Je ne comprends pas mais quand je colle ton code dans la partie Javascrip du Dashboard et bien rien ne se passe du tout

Mais il en est de même pour le bout de code CSS !

Je ne comprends pas on dirait que la personnalisation avancé ne fonctionne pas

1 « J'aime »

il faut que tu appelles ta fonction javascript

$(function() {
  $('body').on('jeedom_page_load', function (event) {
   setTimeout(function() {addColspan($('TD'))}, 300)
  })
})

au chargement de Jeedom, on lance la fonction au bout de 300ms (le temps que jeedom charge ses modules. si ca fonctionne pas bien, on peut augmenter ce délai).

pour ton css, peux tu tester
border-radius : 50 px !important;

Tu utilises bien dans ton exemple grid-row-start mais ça marche à moitié chez moi.
Je ne suis pas sûr de comprendre pour fusionner en vertical ou horizontal. C’est du relatif ou de l’absolu ?
Dans ton exemple, tu mets 4. Ca marche sur la première cellule pour moi. Mais si j’en ai d’autres, marche pas !

Par exemple :

grid-row-start:2;

Me permet de fusionner la 3e colonne, 3e ligne avec la 3e colonne, 4e ligne vide.

qui donne :

mais si je fais la même chose sur la 3e ligne de la 4e colonne avec le même code pour fusionner avec la 4e ligne, 4e colonne… comme tu le vois, ça ne marche pas.

Bonjour,

Jeedom crée des tableaux en HTML.
Du coup, Grid-column-start et grid-row-start sont utilisé d’une manière détournée. (Si je ne dis pas de bêtises, ils sont utilisés lorsqu’on a des Flexgrid, ce qui n’est pas le cas ici).

Du coup, les chiffres utilisés correspondent aux nombres de lignes ou colonnes.

Je m’en sers seulement pour récupérer les colonnes et les lignes à fusionner dans mon script javascript.

Grid-column-start me sert à crée un colspan en HTML
Grid-row-start me sert à créer un rowspan en HTML

Grid-column-start = 1 ( équivalent colspan = 1) me dit que ma cellule ne prends qu’une colonne (par défaut, c’est le cas)
Grid-column-start = 2 … la cellule occupe 2 colonnes
Grid-column-start = 3 …
il faut donc qu’à droite de cette colonne, il y ait au minimum le nombre de colonnes qui correspond

Grid-row-start = 1 (équivalent rowspan = 1 ) …
Grid-row-start = 2 … la cellule occupe 2 lignes
… tu as compris le principe.

quand tu fais un colspan : il faut vérifier que tu as assez de colonnes à fusionner à droite. sinon ça fait un peu n’importe quoi

quand tu fais un rowspan : il faut vérifier que tu as assez de lignes à fusionner en dessous. sinon ça fait un peu n’importe quoi.

Quand tu dis que cela fonctionne pas. c’est le bouton power qui doit être fusionné, c’est ça ?

Je vais essayé de reproduire. on n’est pas à l’abris que j’ai oublié des cas de figure.
à la base, c’est un tableau de 6 colonnes sur 4 lignes, c’est ça ?

Je vais regarder et te dis, merci de me répondre en tout cas.

Par contre ton code doit avoir un souci car il me génère une erreur quand je l’active en perso avancée.
Si je remets l’ancien code, pas d’erreur.

Je te détaille, tableau de 4x4.

Ce qui m’intéresse c’est fusionner les 2 cases en rouge.

Donc logiquement dans (ligne,colonne) :

  • 3,3 j’ajouterai : grid-row-start:2 (pour qu’elle occupe deux lignes)
  • 3,4 j’ajouterai : grid-row-start:2 (pour qu’elle occupe deux lignes)

Quand je fais ça, je n’ai que 3,3 qui est fusionné avec 4,3 mais pas la voisine.

Je peux aussi faire en 4,3 : Grid-column-start:2
Mais du coup je ne peux pas fusionner les 2 cases au dessus.

je vais regarder ça. je vais me mettre dans les mêmes conditions et regarder ce qui se passe.

Oui, d’après l’erreur, il doit manquer un test dans mon code.

tu as bien compris le fonctionnement.

par contre, dans ta dernière capture. je ne vois pas de grid-row-start en dessous de poweroff.
ou alors, il est pas visible à cause du texte avant?

EDIT : c’est bon. j’ai reproduit le message d’erreur + le problème.
je regarde ça. je te promet de trouver une réponse ce soir. je suis un peu lessivé.

1 « J'aime »

Euh te stresse pas à ce soir (je crois que c’était l’inverse que tu voulais écrire).
Je n’en ai pas besoin, c’est plutôt au cas où… car je refais mon design suite au passage V4 :wink:


function addColspan(Tabobjets) {
  		
  		//console.log('fonction');
  		Tabobjets.each(function(objet) {
          
          if ($(this).css("column-span") != undefined)
          {
            	//console.log('column-span');
           		if ($(this).css("column-span") === 'all')
          		{
           			//console.log('column-span== all');
                    var nbtd = $(this).siblings().length + 1;
                  	$($(this).siblings()).remove();
                    $(this).attr('colspan',nbtd);        
          		} 
            	else
                {
                  //debugger
                  var nb = $(this).css("column-span");
                  //alert(nb);
                }
                               
          }
          
          if ($(this).css("grid-column-start") != undefined)
          {
            	
                var nb = $(this).css("grid-column-start");
            	
            	if ($(this).css("grid-column-start") != 'auto' && $(this).css("grid-column-start") != '')
          		{
                  
                  	for(let i=0;i<nb;i++)
                    {
                      //debugger
                      if ($(this).next() != undefined)
                      {
                      		$($(this).next()).remove();
                      }
                    }
                  	$(this).attr('colspan',nb);
                
                }
                  
                               
          }
          
          
          if ($(this).css("grid-row-start") != undefined)
          {
            	
                var nb = $(this).css("grid-row-start");
            	var idCol = $(this).attr('data-column')
            	if ($(this).css("grid-row-start") != 'auto' && $(this).css("grid-row-start") != '')
          		{
                  	var elt = $(this).parent('tr'); 
                  	for(let i=0;i<nb;i++)
                    {
                      if (elt.next() != undefined)
                      {
                      		elt = elt.next();
                       		if (elt.children('[data-column=' + idCol +']') != undefined)
                      		{
                              	
                            	elt.children('[data-column=' + idCol +']').remove();  
                            }
                      }
                      
                    }
                  	$(this).attr('rowspan',nb);
                
                }
                  
                               
          }
          
          
         
          
          
          
          
        });
        
};

Voila, j’ai modifié.je te garantit rien.je suis un peu dans le gaz (mais je n’ai pas pu m’empêcher de regarder).

Dit moi, ce que tu en penses.

Si on arrive à une solution qui marche.

Je vais demander à un des admins de Youdom pour mettre à jour article (ou écrire un nouvel article).
cela a l’air d’intéresser pas mal de monde.
autant en faire profiter le plus grand nombre.

Je vois et te dis à l’utilisation.

Par contre, perso, j’ai des soucis en cas de refresh de virtuels, les colonnes peuvent sauter à l’affichage et il me faut forcer un refresh de la page pour avoir de nouveau le tableau bien à jour.

Une image valant plus de mille discours.

La page se charge j’ai ça (parfait) :

Au bout de quelques minutes les virtuels dedans bougeant, ça saute… et pas d’autres solutions que de faire un refresh à la main ou de manière régulière (pas top) de toute la page. (désolé c’est un impr écran d’une vidéo que j’ai faite pour Djul sur le fil JPI).

Un grand merci à toi pour ton aide! A voir sur l’utilisation mais cela fonctionne! Et je ne serais pas du tout allé sur cette logique de code donc j’y serais encore à cette heure-ci lol

1 « J'aime »