jQuery Girl
  1. jQuery Girl
  3. Masquer / Afficher les colonnes – Comment grouper des colonnes?
Intereting Posts
Comment convertir chaque col par index dans une table en moment local? Exécuter la fonction après qu’une fonction est terminée – JQuery animate comment obtenir la valeur de l’élément json sans la double citation CSS3: la propriété de transformation ne fonctionne pas comme prévu dans chrome Déclenchement de fancybox à partir d’un lien de la page – Galerie d’images avec plusieurs albums question jQuery Ajax Toujours obtenir des valeurs nulles dans le contrôleur pour ajax post Soumettre un formulaire avec plusieurs objects au contrôleur Obtenir une valeur d’entrée en utilisant htmlfor rails, obtenir une erreur de syntaxe avec le script coffee Accordéon jQuery cassé dans Google Maps jQuery UI sortingable ne fonctionne pas dans iPAD Comment lire ligne par ligne une balise HTML de zone de texte Arrêtez la superposition des animations jQuery boucle de surbrillance des bordures avec jquery

Masquer / Afficher les colonnes – Comment grouper des colonnes?

Pour le moment, j’ai ce code de travail: http://jsfiddle.net/tarabyte/s8Qds/3/

Javascript: 

$(function() { (function generateStyleSheet(len){ var styles = [], i = 0; for(; i < len; i++) { styles.push('.hide-' + i + ' .column-' + i + ' {display: none;}') ; } $('' + styles.join('\n') + '').appendTo(document.body); }(100)) function Toggler(idx, text, table, togglers) { this.idx = idx; this.text = $.sortingm(text); this.table = table; this.togglers = togglers; this.init(); } Toggler.prototype.init = function() { this.element = $('' + this.text + '').appendTo(this.togglers).data('toggler', this); }; Toggler.prototype.toggle = function() { this.element.toggleClass('pressed'); this.table.toggleClass('hide-'+this.idx); }; function Togglers(el, table, hidden) { this.el = el.jQuery ? el : $(el); this.table = table.jQuery ? table : $(table); this.togglers = {}; this.hidden = hidden||[]; this.init(); } Togglers.prototype.init = function() { var columns = 0, me = this; this.el.on('click', '.toggler', function(e){ $(e.target).data('toggler').toggle(); }); this.table.find('th').each(function(idx, header){ header = $(header); me.add(idx, header.text()); header.addClass('column-' + idx); columns++; }).end() .find('td').each(function(idx, td) { $(td).addClass('column-' + (idx%columns)); }); $.each(this.hidden, function(_, name) { me.toggle(name); }); }; Togglers.prototype.toggle = function(name) { var toggler = this.togglers[name]; if(toggler) { toggler.toggle() } else { console.warn('Unable to find column with name: ' + name); } }; Togglers.prototype.add = function(idx, name) { var toggler = new Toggler(idx, name, this.table, this.el); this.togglers[toggler.text] = toggler; }; var togglers = new Togglers('#togglers', $('#table'), ['Color']); togglers.toggle('Number'); })

CSS 

 .toggler { display: inline-block; padding: 5px 10px; margin: 2px; border: 1px solid black; border-radius: 2px; cursor: pointer; } .toggler.pressed { background-color: #BBB; }

HTML 

 
 
 
 ID Color Number 
 
 1 #990000 C001 
 
 2 #009900 C002 
 
 3 #FFFFFF C003 
 
 4 #000000 C004

Maintenant, ce que je voudrais faire est de regrouper “Couleur” et “Nombre”. Ainsi, vous verriez ID (masquer / afficher ID) plus d’informations (masquer la couleur et le numéro d’affichage)

Je ne connais pas par défaut l’ordre des colonnes, je connais juste le nom des colonnes que je souhaite regrouper.

J’ai essayé quelque chose comme ceci: http://jsfiddle.net/Ap9sQ/6/ J’ai modifié certaines valeurs pour que cela fonctionne sur mon site. Le problème est que je ne peux pas faire “plus d’infos” gris par défaut et quand vous cliquez dessus vert (ou) gris …