library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-10-08 13:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ColumnSelector: Add mediaqueryHidden option. Resolves #964

Browse Source
This commit is contained in:
Rob Garrison 2015-10-19 11:49:21 -05:00
parent 921631397c
commit 9d7f0fb26c
3 changed files with 61 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/js/widgets/widget-columnSelector.min.js vendored
View File

File diff suppressed because one or more lines are too long

27
docs/example-widget-column-selector.html
View File

@ -83,6 +83,9 @@
#popover-target input {
margin-right: 5px;
}
#popover-target .disabled {
color: #ddd;
}
</style>
<script id="js">$(function() {
@ -114,6 +117,8 @@
columnSelector_mediaqueryName: 'Auto: ',
// breakpoints checkbox initial setting
columnSelector_mediaqueryState: true,
// hide columnSelector false columns while in auto mode
columnSelector_mediaqueryHidden: true,
// responsive table hides columns with priority 1-6 at these breakpoints
// see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
// *** set to false to disable ***
@ -170,6 +175,7 @@
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>In <span class="version">v2.23.6</span>, added <code>columnSelector_mediaqueryHidden</code> option.</li>
<li>In <span class="version">v2.23.2</span>, added <code>columnSelector_updated</code> option.</li>
<li>In <span class="version updated">v2.23.0</span>, updated methods to allow refreshing the content of the container &amp; enchanced ability to set both auto and columns modes.</li>
<li>In <span class="version updated">v2.19.0</span>, the <code>refreshColumnSelector</code> method has been updated to allow passing a parameter. Pass an array of zero-based column indexes of columns to show, or any non-array to enable auto mode (if available).</li>
@ -339,6 +345,27 @@
</td>
</tr>
<tr id="column-selector-mediaquery-hidden">
<td><a href="#" class="permalink">columnSelector_mediaqueryHidden</a></td>
<td>When this option is set to <code>true</code> columns with a "columnSelector-false" class will be hidden while media queries ("auto" mode) are active.
<div class="collapsible">
<br>
<ul>
<li>With this option set to <code>true</code>, the hidden state of a column can be set using any of the following methods, added to the header cell, in order of priority:
<ul>
<li>jQuery data <code>data-columnSelector="false"</code>.</li>
<li>metadata <code>class=&quot;{ columnSelector : false }&quot;</code> (requires the metadata plugin).</li>
<li>headers option <code>headers : { 0 : { columnSelector: 'false' } }</code>.</li>
<li>header class name <code>class=&quot;columnSelector-false&quot;</code>.</li>
</ul>
</li>
</ul>
<p>See <a href="https://github.com/Mottie/tablesorter/issues/964">issue #964</a> for more details.</p>
Default value: <code>false</code>
</div>
</td>
</tr>
<tr id="column-selector-breakpoints">
<td><a href="#" class="permalink">columnSelector_breakpoints</a></td>
<td>This option defines the media query breakpoints with which to use when a column with the associated priority is hidden or revealed.

51
js/widgets/widget-columnSelector.js
View File

@ -126,7 +126,8 @@
// if no data-priority is assigned, default to 1, but don't remove it from the selector list
priority = $this.attr(wo.columnSelector_priority) || 1,
colId = $this.attr('data-column'),
state = ts.getData(this, c.headers[colId], 'columnSelector');
col = ts.getColumnData( c.table, c.headers, colId ),
state = ts.getData(this, col, 'columnSelector');
// if this column not hidable at all
// include getData check (includes 'columnSelector-false' class, data attribute, etc)
@ -227,9 +228,19 @@
c.$table.trigger(wo.columnSelector_updated);
}
},
addSelectors: function( prefix, column ) {
var array = [],
temp = ' col:nth-child(' + column + ')';
array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
temp = ' tr th:nth-child(' + column + ')';
array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
temp = ' tr td:nth-child(' + column + ')';
array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
return array;
},
updateBreakpoints: function(c, wo) {
var priority, column, breaks, temp,
var priority, col, column, breaks,
isHidden = [],
colSel = c.selector,
prefix = c.namespace + 'columnselector',
mediaAll = [],
@ -239,19 +250,27 @@
colSel.$style.prop('disabled', false);
return;
}
if (wo.columnSelector_mediaqueryHidden) {
// add columns to be hidden; even when "auto" is set - see #964
for ( column = 0; column < c.columns; column++ ) {
col = ts.getColumnData( c.table, c.headers, column );
isHidden[ column + 1 ] = ts.getData( c.$headerIndexed[ column ], col, 'columnSelector' ) === 'false';
if ( isHidden[ column + 1 ] ) {
// hide columnSelector false column (in auto mode)
mediaAll = mediaAll.concat( tsColSel.addSelectors( prefix, column + 1 ) );
}
}
}
// only 6 breakpoints (same as jQuery Mobile)
for (priority = 0; priority < 6; priority++){
/*jshint loopfunc:true */
breaks = [];
c.$headers.filter('[' + wo.columnSelector_priority + '=' + (priority + 1) + ']').each(function(){
column = parseInt($(this).attr('data-column'), 10) + 1;
temp = ' col:nth-child(' + column + ')';
breaks.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
temp = ' tr th:nth-child(' + column + ')';
breaks.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
temp = ' tr td:nth-child(' + column + ')';
breaks.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
// don't reveal columnSelector false columns
if ( !isHidden[ column ] ) {
breaks = breaks.concat( tsColSel.addSelectors( prefix, column ) );
}
});
if (breaks.length) {
mediaAll = mediaAll.concat( breaks );
@ -269,24 +288,18 @@
.html( tsColSel.queryAll.replace(/\[columns\]/g, mediaAll.join(',')) + breakpts );
}
},
updateCols: function(c, wo) {
if (wo.columnSelector_mediaquery && c.selector.auto || c.selector.isInitializing) {
return;
}
var column, temp,
var column,
colSel = c.selector,
styles = [],
prefix = c.namespace + 'columnselector';
colSel.$container.find('input[data-column]').filter('[data-column!="auto"]').each(function(){
if (!this.checked) {
column = parseInt( $(this).attr('data-column'), 10 ) + 1;
temp = ' col:nth-child(' + column + ')';
styles.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
temp = ' tr th:nth-child(' + column + ')';
styles.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
temp = ' tr td:nth-child(' + column + ')';
styles.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
styles = styles.concat( tsColSel.addSelectors( prefix, column ) );
}
$(this).toggleClass( wo.columnSelector_cssChecked, this.checked );
});
@ -360,6 +373,8 @@
columnSelector_mediaqueryName: 'Auto: ',
// breakpoints checkbox initial setting
columnSelector_mediaqueryState: true,
// hide columnSelector false columns while in auto mode
columnSelector_mediaqueryHidden: false,
// responsive table hides columns with priority 1-6 at these breakpoints
// see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
// *** set to false to disable ***