隐藏/显示列

本文介绍了隐藏/显示列 - 如何对列进行分组？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

目前我有这个工作代码： jsfiddle/tarabyte/s8Qds/ 3 /

At the moment I have this working code: jsfiddle/tarabyte/s8Qds/3/

Javascript：

Javascript:

$(function() { (function generateStyleSheet(len){ var styles = [], i = 0; for(; i < len; i++) { styles.push('.hide-' + i + ' .column-' + i + ' {display: none;}') ; } $('<style>' + styles.join('\n') + '</style>').appendTo(document.body); }(100)) function Toggler(idx, text, table, togglers) { this.idx = idx; this.text = $.trim(text); this.table = table; this.togglers = togglers; this.init(); } Toggler.prototype.init = function() { this.element = $('<span class="toggler" >' + this.text + '</span>').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

<div id="togglers"></div> <table id="table"> <tr> <th class="Title">ID</th> <th class="Title">Color</th> <th class="Title">Number</th> </tr> <tr> <td>1</td> <td>#990000</td> <td>C001</td> </tr> <tr> <td>2</td> <td>#009900</td> <td>C002</td> </tr> <tr> <td>3</td> <td>#FFFFFF</td> <td>C003</td> </tr> <tr> <td>4</td> <td>#000000</td> <td>C004</td> </tr> </table>

现在我想做的是将颜色和数字分组。所以你会看到ID（隐藏/显示ID）更多信息（隐藏显示颜色和数字）

Now what I would like to do is to group "Color" and "Number". So you would see ID (to hide/show ID) more info (to hide show color and number)

我不知道默认情况下，我只知道要分组的列的名称。

I don't know by default the order of the colums, I just know the name of the columns I want to group.

我试过这样： jsfiddle/Ap9sQ/6/ 我改变了一些值，所以它在我的网站上工作。问题是，我不能使更多信息灰色默认情况下，当你点击它的绿色（或）灰色...

I tried something like this: jsfiddle/Ap9sQ/6/ I changed some values so it works on my site. The problem is that I can't make "more info" grey by default and when you click on it green(or)grey...

推荐答案

我有解决方案，但这是好的代码？

I have the solution, but is this good code?

不要看看var的名字，我会更改它们

Don't look at the names of the var's, I'll change them by a better name.

jsfiddle/n4zzf / 4 /

只有javascript（其余部分并不重要）

Only the javascript (the rest is not so important)

$(function() { (function generateStyleSheet(len){ var styles = [], i = 0; for(; i < len; i++) { styles.push('.hide-' + i + ' .column-' + i + ' {display: none;}') ; } $('<style>' + styles.join('\n') + '</style>').appendTo(document.body); }(100)) function Toggler(idx, text, table, togglers) { this.idx = idx; this.text = $.trim(text); this.table = table; this.togglers = togglers; this.init(); } var navigation = 1; var nav; var DatesGroupNavigation = []; var DatesGroupNavigation2 = []; Toggler.prototype.init = function() { this.element = $('<span class="toggler navigation'+navigation+'" >' + this.text + '</span>').appendTo(this.togglers).data('toggler', this); switch (0){ case this.text.indexOf("Title01"): case this.text.indexOf("Title02"): case this.text.indexOf("Title03"): case this.text.indexOf("Title04"): DatesGroupNavigation.push(navigation); break; case this.text.indexOf("Title1"): case this.text.indexOf("Title2"): case this.text.indexOf("Title3"): case this.text.indexOf("Title4"): DatesGroupNavigation2.push(navigation); break; } navigation++; }; 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(); } var DatesGroupColumns = []; var DatesGroupColumns2 = []; var title; 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){ if(columns>0){ header = $(header); me.add(idx, header.text()); header.addClass('column-' + idx); title = header.text(); switch (0){ case title.indexOf("Title01"): case title.indexOf("Title02"): case title.indexOf("Title03"): case title.indexOf("Title04"): console.warn(idx); DatesGroupColumns.push(idx); break; case title.indexOf("Title1"): case title.indexOf("Title2"): case title.indexOf("Title3"): case title.indexOf("Title4"): console.warn(idx); DatesGroupColumns2.push(idx); break; } } 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('Client');*/ var Loop; DatesGroupNavigationLength = DatesGroupNavigation.length; for ( Loop = 0; Loop < DatesGroupNavigationLength; Loop++) { console.warn(DatesGroupNavigation[Loop]); $('.navigation'+DatesGroupNavigation[Loop]).addClass('HideColumn'); } console.warn(DatesGroupColumns); Loop = 0; DatesGroupColumnsLength = DatesGroupColumns.length; $('<span class="togglerExtra navigation'+navigation+'" >All title with 0</span>').appendTo($("#togglers")).click(function () { for ( Loop = 0; Loop < DatesGroupColumnsLength; Loop++) { console.warn(Loop + " - test: " + DatesGroupColumns[Loop]); $('.navigation'+ DatesGroupColumns[Loop]).data('toggler').toggle(); } $('.navigation'+navigation).toggleClass("pressed"); }); Loop = 0; var navigation2 = navigation+1; DatesGroupNavigationLength2 = DatesGroupNavigation2.length; for ( Loop = 0; Loop < DatesGroupNavigationLength2; Loop++) { console.warn(DatesGroupNavigation2[Loop]); $('.navigation'+DatesGroupNavigation2[Loop]).addClass('HideColumn'); } console.warn(DatesGroupColumns2); Loop = 0; DatesGroupColumnsLength2 = DatesGroupColumns2.length; $('<span class="togglerExtra navigation'+navigation2+'" >All title without 0</span>').appendTo($("#togglers")).click(function () { for ( Loop = 0; Loop < DatesGroupColumnsLength2; Loop++) { console.warn(Loop + " - test: " + DatesGroupColumns2[Loop]); $('.navigation'+ DatesGroupColumns2[Loop]).data('toggler').toggle(); } $('.navigation'+navigation2).toggleClass("pressed"); }); })