library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ColumnSelector: columns array parameter added to refreshColumnSelector method. Fixes #798

Browse Source
This commit is contained in:
Mottie 2015-01-20 10:51:17 -06:00
parent a50f5555a9
commit b3a7b82a67
2 changed files with 64 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -182,6 +182,7 @@
<h3><a href="#">Notes</a></h3> <h3><a href="#">Notes</a></h3>
<div> <div>
<ul> <ul>
<li>In <span class="version updated">v2.18.5</span>, the <code>refreshColumnSelector</code> method has been updated to allow passing an array of zero-based column indexes of columns to show.</li>
<li>In <span class="version">v2.18.4</span>, added <code>columnSelector_cssChecked</code> option which contains the class name added to checked inputs. This helps fix an issue in Chrome that rears it's ugly head when trying to use <code>input:checked</code> to change a Font Awesome icon. See <a href="http://jsfiddle.net/2tu38gez">this demo</a> by TheSin which uses this option to change the checkbox style.</li> <li>In <span class="version">v2.18.4</span>, added <code>columnSelector_cssChecked</code> option which contains the class name added to checked inputs. This helps fix an issue in Chrome that rears it's ugly head when trying to use <code>input:checked</code> to change a Font Awesome icon. See <a href="http://jsfiddle.net/2tu38gez">this demo</a> by TheSin which uses this option to change the checkbox style.</li>
<li> <li>
In <span class="version">v2.17.0</span>, a method to refresh the column selector was added.<br> In <span class="version">v2.17.0</span>, a method to refresh the column selector was added.<br>
@ -398,9 +399,18 @@
<h3><a href="#">Methods</a></h3> <h3><a href="#">Methods</a></h3>
<div> <div>
Refresh the breakpoints and selected columns using this method (<span class="version">v2.17.0</span>):<br> Refresh the breakpoints and selected columns using this method (<span class="version">v2.17.0</span>):
<br> <p></p>
<pre class="prettyprint lang-js">$('table').trigger('refreshColumnSelector');</pre> <pre class="prettyprint lang-js">$('table').trigger('refreshColumnSelector');</pre>
<br>
In <span class="version">v2.18.5</span>, this method will now accept an array of zero-based column indexes to toggle columns on and off.
<p></p>
<pre class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', [ [2,3,4] ]);</pre>
<span class="label label-info">Note</span>
<ul>
<li>Make sure to wrap the array inside another array.</li>
<li>Columns marked as "critical" or "disable" will never get toggled off using this method.</li>
</ul>
</div> </div>
<h3><a href="#">Removing a column from the selector</a></h3> <h3><a href="#">Removing a column from the selector</a></h3>
@ -418,7 +428,7 @@
</ul> </ul>
</li> </li>
</ul> </ul>
* Prior to v2.15.6, setting these methods to "false" would remove it from the selector. Now, they must be set to "disable" to remove the column from the selector, this was done to make it more consistent with the <code>columnSelector_columns</code> setting. * <span class="label label-warning">*NOTE*</span> Prior to v2.15.6, setting these methods to "false" would remove it from the selector. Now, they must be set to "disable" to remove the column from the selector, this was done to make it more consistent with the <code>columnSelector_columns</code> setting.
</div> </div>
</div> </div>

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

@ -1,4 +1,4 @@
/* Column Selector/Responsive table widget (beta) for TableSorter - 12/22/2014 (v2.18.4) /* Column Selector/Responsive table widget (beta) for TableSorter - 1/20/2015 (v2.18.5)
* Requires tablesorter v2.8+ and jQuery 1.7+ * Requires tablesorter v2.8+ and jQuery 1.7+
* by Justin Hallett & Rob Garrison * by Justin Hallett & Rob Garrison
*/ */
@ -49,11 +49,28 @@ tsColSel = ts.columnSelector = {
c.$table c.$table
.off('refreshColumnSelector' + namespace) .off('refreshColumnSelector' + namespace)
.on('refreshColumnSelector' + namespace, function(){ .on('refreshColumnSelector' + namespace, function(e, arry){
// make sure we're using current config settings // make sure we're using current config settings
var c = this.config; var i,
tsColSel.updateBreakpoints(c, c.widgetOptions); c = this.config,
tsColSel.updateCols(c, c.widgetOptions); wo = c.widgetOptions;
// see #798
if ($.isArray(arry) && c.selector.$container.length) {
// make sure array contains numbers
$.each(arry, function(i,v){
arry[i] = parseInt(v, 10);
});
for (i = 0; i < c.columns; i++) {
c.selector.$container
.find('input[data-column=' + i + ']')
.prop('checked', $.inArray( i, arry ) >= 0 );
}
// set auto to false to allow manual column selection & update columns
tsColSel.updateAuto( c, wo, colSel.$container.find('input[data-column="auto"]').prop('checked', false) );
} else {
tsColSel.updateBreakpoints(c, wo);
tsColSel.updateCols(c, wo);
}
}); });
}, },
@ -91,7 +108,7 @@ tsColSel = ts.columnSelector = {
// set default state; storage takes priority // set default state; storage takes priority
colSel.states[colId] = saved && typeof(saved[colId]) !== 'undefined' ? colSel.states[colId] = saved && typeof(saved[colId]) !== 'undefined' ?
saved[colId] : typeof(wo.columnSelector_columns[colId]) !== 'undefined' ? saved[colId] : typeof(wo.columnSelector_columns[colId]) !== 'undefined' ?
wo.columnSelector_columns[colId] : (state === 'true' || !(state === 'false')); wo.columnSelector_columns[colId] : (state === 'true' || state !== 'false');
colSel.$column[colId] = $(this); colSel.$column[colId] = $(this);
// set default col title // set default col title
@ -141,29 +158,7 @@ tsColSel = ts.columnSelector = {
.prop('checked', colSel.auto) .prop('checked', colSel.auto)
.toggleClass( wo.columnSelector_cssChecked, colSel.auto ) .toggleClass( wo.columnSelector_cssChecked, colSel.auto )
.on('change', function(){ .on('change', function(){
colSel.auto = this.checked; tsColSel.updateAuto(c, wo, $(this));
$.each( colSel.$checkbox, function(i, $cb){
if ($cb) {
$cb[0].disabled = colSel.auto;
colSel.$wrapper[i].toggleClass('disabled', colSel.auto);
}
});
if (wo.columnSelector_mediaquery) {
tsColSel.updateBreakpoints(c, wo);
}
tsColSel.updateCols(c, wo);
// copy the column selector to a popup/tooltip
if (c.selector.$popup) {
c.selector.$popup.find('.tablesorter-column-selector')
.html( colSel.$container.html() )
.find('input').each(function(){
var indx = $(this).attr('data-column');
$(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
@ -173,6 +168,33 @@ tsColSel = ts.columnSelector = {
} }
}, },
updateAuto: function(c, wo, $el) {
var colSel = c.selector;
colSel.auto = $el.prop('checked') || false;
$.each( colSel.$checkbox, function(i, $cb){
if ($cb) {
$cb[0].disabled = colSel.auto;
colSel.$wrapper[i].toggleClass('disabled', colSel.auto);
}
});
if (wo.columnSelector_mediaquery) {
tsColSel.updateBreakpoints(c, wo);
}
tsColSel.updateCols(c, wo);
// copy the column selector to a popup/tooltip
if (c.selector.$popup) {
c.selector.$popup.find('.tablesorter-column-selector')
.html( colSel.$container.html() )
.find('input').each(function(){
var indx = $(this).attr('data-column');
$(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 } );
}
},
updateBreakpoints: function(c, wo) { updateBreakpoints: function(c, wo) {
var priority, column, breaks, var priority, column, breaks,
colSel = c.selector, colSel = c.selector,