mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
ColumnSelector: Add mediaqueryHidden option. Resolves #964
This commit is contained in:
parent
921631397c
commit
9d7f0fb26c
2
dist/js/widgets/widget-columnSelector.min.js
vendored
2
dist/js/widgets/widget-columnSelector.min.js
vendored
File diff suppressed because one or more lines are too long
@ -83,6 +83,9 @@
|
|||||||
#popover-target input {
|
#popover-target input {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
#popover-target .disabled {
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script id="js">$(function() {
|
<script id="js">$(function() {
|
||||||
@ -114,6 +117,8 @@
|
|||||||
columnSelector_mediaqueryName: 'Auto: ',
|
columnSelector_mediaqueryName: 'Auto: ',
|
||||||
// breakpoints checkbox initial setting
|
// breakpoints checkbox initial setting
|
||||||
columnSelector_mediaqueryState: true,
|
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
|
// 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
|
// see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
|
||||||
// *** set to false to disable ***
|
// *** set to false to disable ***
|
||||||
@ -170,6 +175,7 @@
|
|||||||
<h3><a href="#">Notes</a></h3>
|
<h3><a href="#">Notes</a></h3>
|
||||||
<div>
|
<div>
|
||||||
<ul>
|
<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">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 & enchanced ability to set both auto and columns modes.</li>
|
<li>In <span class="version updated">v2.23.0</span>, updated methods to allow refreshing the content of the container & 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>
|
<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>
|
</td>
|
||||||
</tr>
|
</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="{ columnSelector : false }"</code> (requires the metadata plugin).</li>
|
||||||
|
<li>headers option <code>headers : { 0 : { columnSelector: 'false' } }</code>.</li>
|
||||||
|
<li>header class name <code>class="columnSelector-false"</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">
|
<tr id="column-selector-breakpoints">
|
||||||
<td><a href="#" class="permalink">columnSelector_breakpoints</a></td>
|
<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.
|
<td>This option defines the media query breakpoints with which to use when a column with the associated priority is hidden or revealed.
|
||||||
|
@ -126,7 +126,8 @@
|
|||||||
// if no data-priority is assigned, default to 1, but don't remove it from the selector list
|
// 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,
|
priority = $this.attr(wo.columnSelector_priority) || 1,
|
||||||
colId = $this.attr('data-column'),
|
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
|
// if this column not hidable at all
|
||||||
// include getData check (includes 'columnSelector-false' class, data attribute, etc)
|
// include getData check (includes 'columnSelector-false' class, data attribute, etc)
|
||||||
@ -227,9 +228,19 @@
|
|||||||
c.$table.trigger(wo.columnSelector_updated);
|
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) {
|
updateBreakpoints: function(c, wo) {
|
||||||
var priority, column, breaks, temp,
|
var priority, col, column, breaks,
|
||||||
|
isHidden = [],
|
||||||
colSel = c.selector,
|
colSel = c.selector,
|
||||||
prefix = c.namespace + 'columnselector',
|
prefix = c.namespace + 'columnselector',
|
||||||
mediaAll = [],
|
mediaAll = [],
|
||||||
@ -239,19 +250,27 @@
|
|||||||
colSel.$style.prop('disabled', false);
|
colSel.$style.prop('disabled', false);
|
||||||
return;
|
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)
|
// only 6 breakpoints (same as jQuery Mobile)
|
||||||
for (priority = 0; priority < 6; priority++){
|
for (priority = 0; priority < 6; priority++){
|
||||||
/*jshint loopfunc:true */
|
/*jshint loopfunc:true */
|
||||||
breaks = [];
|
breaks = [];
|
||||||
c.$headers.filter('[' + wo.columnSelector_priority + '=' + (priority + 1) + ']').each(function(){
|
c.$headers.filter('[' + wo.columnSelector_priority + '=' + (priority + 1) + ']').each(function(){
|
||||||
column = parseInt($(this).attr('data-column'), 10) + 1;
|
column = parseInt($(this).attr('data-column'), 10) + 1;
|
||||||
temp = ' col:nth-child(' + column + ')';
|
// don't reveal columnSelector false columns
|
||||||
breaks.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
|
if ( !isHidden[ column ] ) {
|
||||||
temp = ' tr th:nth-child(' + column + ')';
|
breaks = breaks.concat( tsColSel.addSelectors( prefix, column ) );
|
||||||
breaks.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
|
}
|
||||||
temp = ' tr td:nth-child(' + column + ')';
|
|
||||||
breaks.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
|
|
||||||
});
|
});
|
||||||
if (breaks.length) {
|
if (breaks.length) {
|
||||||
mediaAll = mediaAll.concat( breaks );
|
mediaAll = mediaAll.concat( breaks );
|
||||||
@ -269,24 +288,18 @@
|
|||||||
.html( tsColSel.queryAll.replace(/\[columns\]/g, mediaAll.join(',')) + breakpts );
|
.html( tsColSel.queryAll.replace(/\[columns\]/g, mediaAll.join(',')) + breakpts );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
updateCols: function(c, wo) {
|
updateCols: function(c, wo) {
|
||||||
if (wo.columnSelector_mediaquery && c.selector.auto || c.selector.isInitializing) {
|
if (wo.columnSelector_mediaquery && c.selector.auto || c.selector.isInitializing) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var column, temp,
|
var column,
|
||||||
colSel = c.selector,
|
colSel = c.selector,
|
||||||
styles = [],
|
styles = [],
|
||||||
prefix = c.namespace + 'columnselector';
|
prefix = c.namespace + 'columnselector';
|
||||||
colSel.$container.find('input[data-column]').filter('[data-column!="auto"]').each(function(){
|
colSel.$container.find('input[data-column]').filter('[data-column!="auto"]').each(function(){
|
||||||
if (!this.checked) {
|
if (!this.checked) {
|
||||||
column = parseInt( $(this).attr('data-column'), 10 ) + 1;
|
column = parseInt( $(this).attr('data-column'), 10 ) + 1;
|
||||||
temp = ' col:nth-child(' + column + ')';
|
styles = styles.concat( tsColSel.addSelectors( prefix, 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);
|
|
||||||
}
|
}
|
||||||
$(this).toggleClass( wo.columnSelector_cssChecked, this.checked );
|
$(this).toggleClass( wo.columnSelector_cssChecked, this.checked );
|
||||||
});
|
});
|
||||||
@ -360,6 +373,8 @@
|
|||||||
columnSelector_mediaqueryName: 'Auto: ',
|
columnSelector_mediaqueryName: 'Auto: ',
|
||||||
// breakpoints checkbox initial setting
|
// breakpoints checkbox initial setting
|
||||||
columnSelector_mediaqueryState: true,
|
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
|
// 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
|
// see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
|
||||||
// *** set to false to disable ***
|
// *** set to false to disable ***
|
||||||
|
Loading…
Reference in New Issue
Block a user