jQuery Girl
  1. jQuery Girl
  3. Masquer / Afficher les colonnes – Comment grouper des colonnes?
Intereting Posts
jQuery ne fonctionne pas dans Firefox Javascript sort () ne pas alphabétiser correctement Utilisation de jQuery pour style iFrame Formulaire ASP.Net MVC Ajax avec validation jQuery Uncaught TypeError: Object # n’a pas de méthode ‘movingBoxes’ “Argument non valide” dans IE 8 sur jQuery.prepend () sur des objects Flash Comment utiliser la valeur d’une variable JQuery / Javascript dans un script Perl? JQuery Lint déclare: “Vous avez utilisé le même sélecteur plus d’une fois.” jquery select option de suppression Accès à une variable dans un iframe par le sélecteur jQuery jQuery dans une application ASP.net MVC utilisant Master Pages Comment imprimer Bootstrap Modal exactement comme affichage? “Find ()” de JQuery avec une limite de profondeur, je ne peux pas utiliser .children () jquery: différence de vitesse entre .css et append to head? Comment conserver de l’espace dans la liste d’options de sélection HTML hi

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 …