library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2025-01-12 15:24:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

column selector widget: auto state is saved. Fixes #517

Browse Source
This commit is contained in:
Mottie 2014-03-09 20:20:17 -05:00
parent d34a6a1a74
commit 867447a2e3
3 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -246,7 +246,9 @@
<tr> <tr>
<td><code>columnSelector_saveColumns</code></td> <td><code>columnSelector_saveColumns</code></td>
<td>Save the current manually set column status (not the column's responsive state). This option requires the storage utility contained within the tablesorter widgets file (<code>jquery.tablesorter.widgets.js</code>).<br> <td>Save the current manually set column status and the table's responsive ("auto") state (<span class="version updated">v2.15.7</span>).<br>
<br>
This option requires the storage utility contained within the tablesorter widgets file (<code>jquery.tablesorter.widgets.js</code>).<br>
<br> <br>
Default value: <code>true</code> Default value: <code>true</code>
</td> </td>

2
docs/index.html
View File

@ -386,7 +386,7 @@
<li><a href="example-widget-build-table.html">Build Table Widget</a> (<span class="version">v2.11</span>).</li> <li><a href="example-widget-build-table.html">Build Table Widget</a> (<span class="version">v2.11</span>).</li>
<li>* <a href="example-widget-columns.html">Columns Highlight widget</a> (v2.0.17)</li> <li>* <a href="example-widget-columns.html">Columns Highlight widget</a> (v2.0.17)</li>
<li><span class="label label-info">Beta</span> <a href="example-widget-column-selector.html">Column Selector widget</a> (<span class="version">v2.15</span>).</li> <li><span class="label label-info">Beta</span> <a href="example-widget-column-selector.html">Column Selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.15.7</span>).</li>
<li><a href="example-widget-editable.html">Content Editable widget</a> (v2.9; <span class="version updated">v2.13.2</span>).</li> <li><a href="example-widget-editable.html">Content Editable widget</a> (v2.9; <span class="version updated">v2.13.2</span>).</li>
<li>* Filter Widget: <li>* Filter Widget:
<ul> <ul>

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

@ -32,14 +32,18 @@ tsColSel = ts.columnSelector = {
// build column selector/state array // build column selector/state array
colSel = c.selector = { $container : $(wo.columnSelector_container || '<div>') }; colSel = c.selector = { $container : $(wo.columnSelector_container || '<div>') };
colSel.$style = $('<style></style>').prop('disabled', true).appendTo('head');
colSel.$breakpoints = $('<style></style>').prop('disabled', true).appendTo('head');
colSel.isInitializing = true;
tsColSel.setupSelector(table, c, wo); tsColSel.setupSelector(table, c, wo);
if (wo.columnSelector_mediaquery) { if (wo.columnSelector_mediaquery) {
tsColSel.setupBreakpoints(c, wo); tsColSel.setupBreakpoints(c, wo);
} }
colSel.isInitializing = false;
if (colSel.$container.length) { if (colSel.$container.length) {
colSel.$style = $('<style></style>').prop('disabled', true).appendTo('head');
tsColSel.updateCols(c, wo); tsColSel.updateCols(c, wo);
} }
@ -49,10 +53,13 @@ tsColSel = ts.columnSelector = {
var name, var name,
colSel = c.selector, colSel = c.selector,
$container = colSel.$container, $container = colSel.$container,
useStorage = wo.columnSelector_saveColumns && ts.storage,
// get stored column states // get stored column states
saved = wo.columnSelector_saveColumns && ts.storage ? ts.storage( table, 'tablesorter-columnSelector' ) : []; saved = useStorage ? ts.storage( table, 'tablesorter-columnSelector' ) : [],
state = useStorage ? ts.storage( table, 'tablesorter-columnSelector-auto') : {};
// initial states // initial states
colSel.auto = $.isEmptyObject(state) || $.type(state.auto) !== "boolean" ? wo.columnSelector_mediaqueryState : state.auto;
colSel.states = []; colSel.states = [];
colSel.$column = []; colSel.$column = [];
colSel.$wrapper = []; colSel.$wrapper = [];
@ -99,14 +106,13 @@ tsColSel = ts.columnSelector = {
}, },
setupBreakpoints: function(c, wo){ setupBreakpoints: function(c, wo){
var $auto, colSel = c.selector; var colSel = c.selector;
// add responsive breakpoints // add responsive breakpoints
if (wo.columnSelector_mediaquery) { if (wo.columnSelector_mediaquery) {
// used by window resize function // used by window resize function
colSel.lastIndex = -1; colSel.lastIndex = -1;
wo.columnSelector_breakpoints.sort(); wo.columnSelector_breakpoints.sort();
colSel.$breakpoints = $('<style></style>').prop('disabled', true).appendTo('head');
tsColSel.updateBreakpoints(c, wo); tsColSel.updateBreakpoints(c, wo);
c.$table.unbind('updateAll' + namespace).bind('updateAll' + namespace, function(){ c.$table.unbind('updateAll' + namespace).bind('updateAll' + namespace, function(){
tsColSel.updateBreakpoints(c, wo); tsColSel.updateBreakpoints(c, wo);
@ -116,22 +122,24 @@ tsColSel = ts.columnSelector = {
if (colSel.$container.length) { if (colSel.$container.length) {
// Add media queries toggle // Add media queries toggle
if (wo.columnSelector_mediaquery && wo.columnSelector_mediaquery) { if (wo.columnSelector_mediaquery) {
$auto = $( wo.columnSelector_layout.replace(/\{name\}/g, wo.columnSelector_mediaqueryName) ).prependTo(colSel.$container); colSel.$auto = $( wo.columnSelector_layout.replace(/\{name\}/g, wo.columnSelector_mediaqueryName) ).prependTo(colSel.$container);
$auto colSel.$auto
// needed in case the input in the layout is not wrapped // needed in case the input in the layout is not wrapped
.find('input').add( $auto.filter('input') ) .find('input').add( colSel.$auto.filter('input') )
.attr('data-column', 'auto') .attr('data-column', 'auto')
.prop('checked', wo.columnSelector_mediaqueryState) .prop('checked', colSel.auto)
.bind('change', function(){ .bind('change', function(){
wo.columnSelector_mediaqueryState = this.checked; colSel.auto = this.checked;
$.each( colSel.$checkbox, function(i, $cb){ $.each( colSel.$checkbox, function(i, $cb){
if ($cb) { if ($cb) {
$cb[0].disabled = wo.columnSelector_mediaqueryState; $cb[0].disabled = colSel.auto;
colSel.$wrapper[i].toggleClass('disabled', wo.columnSelector_mediaqueryState); colSel.$wrapper[i].toggleClass('disabled', colSel.auto);
} }
}); });
tsColSel.updateBreakpoints(c, wo); if (wo.columnSelector_mediaquery) {
tsColSel.updateBreakpoints(c, wo);
}
tsColSel.updateCols(c, wo); tsColSel.updateCols(c, wo);
// copy the column selector to a popup/tooltip // copy the column selector to a popup/tooltip
if (c.selector.$popup) { if (c.selector.$popup) {
@ -139,9 +147,12 @@ tsColSel = ts.columnSelector = {
.html( colSel.$container.html() ) .html( colSel.$container.html() )
.find('input').each(function(){ .find('input').each(function(){
var indx = $(this).attr('data-column'); var indx = $(this).attr('data-column');
$(this).prop( 'checked', indx === 'auto' ? wo.columnSelector_mediaqueryState : colSel.states[indx] ); $(this).prop( 'checked', indx === 'auto' ? colSel.auto : colSel.states[indx] );
}); });
} }
if (wo.columnSelector_saveColumns && ts.storage) {
ts.storage( c.$table[0], 'tablesorter-columnSelector-auto', { auto : colSel.auto } );
}
}).change(); }).change();
} }
// Add a bind on update to re-run col setup // Add a bind on update to re-run col setup
@ -157,7 +168,7 @@ tsColSel = ts.columnSelector = {
prefix = '.' + c.tableId, prefix = '.' + c.tableId,
mediaAll = [], mediaAll = [],
breakpts = ''; breakpts = '';
if (wo.columnSelector_mediaquery && !wo.columnSelector_mediaqueryState) { if (wo.columnSelector_mediaquery && !colSel.auto) {
colSel.$breakpoints.prop('disabled', true); colSel.$breakpoints.prop('disabled', true);
colSel.$style.prop('disabled', false); colSel.$style.prop('disabled', false);
return; return;
@ -188,13 +199,14 @@ tsColSel = ts.columnSelector = {
}, },
updateCols: function(c, wo) { updateCols: function(c, wo) {
if (wo.columnSelector_mediaquery && wo.columnSelector_mediaqueryState) { if (wo.columnSelector_mediaquery && c.selector.auto || c.selector.isInitializing) {
return; return;
} }
var column, var column,
colSel = c.selector,
styles = [], styles = [],
prefix = '.' + c.tableId; prefix = '.' + c.tableId;
c.selector.$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;
styles.push(prefix + ' tr th:nth-child(' + column + ')'); styles.push(prefix + ' tr th:nth-child(' + column + ')');
@ -202,13 +214,13 @@ tsColSel = ts.columnSelector = {
} }
}); });
if (wo.columnSelector_mediaquery){ if (wo.columnSelector_mediaquery){
c.selector.$breakpoints.prop('disabled', true); colSel.$breakpoints.prop('disabled', true);
} }
if (c.selector.$style) { if (colSel.$style) {
c.selector.$style.prop('disabled', false).html( styles.length ? styles.join(',') + ' { display: none; }' : '' ); colSel.$style.prop('disabled', false).html( styles.length ? styles.join(',') + ' { display: none; }' : '' );
} }
if (wo.columnSelector_saveColumns && ts.storage) { if (wo.columnSelector_saveColumns && ts.storage) {
ts.storage( c.$table[0], 'tablesorter-columnSelector', c.selector.states ); ts.storage( c.$table[0], 'tablesorter-columnSelector', colSel.states );
} }
}, },
@ -228,7 +240,7 @@ tsColSel = ts.columnSelector = {
.html( colSel.$container.html() ) .html( colSel.$container.html() )
.find('input').each(function(){ .find('input').each(function(){
var indx = $(this).attr('data-column'); var indx = $(this).attr('data-column');
$(this).prop( 'checked', indx === 'auto' ? wo.columnSelector_mediaqueryState : colSel.states[indx] ); $(this).prop( 'checked', indx === 'auto' ? colSel.auto : colSel.states[indx] );
}); });
colSel.$popup = $popup.on('change', 'input', function(){ colSel.$popup = $popup.on('change', 'input', function(){
// data input // data input