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 columnSelector_cssChecked option

Browse Source
This commit is contained in:
Mottie 2014-11-26 21:40:47 -06:00
parent 9b3ab1ba07
commit 2e8add1072
2 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,7 +132,11 @@
// data attribute containing column priority // data attribute containing column priority
// duplicates how jQuery mobile uses priorities: // duplicates how jQuery mobile uses priorities:
// http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/ // http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/
columnSelector_priority : 'data-priority' columnSelector_priority : 'data-priority',
// class name added to checked checkboxes - this fixes an issue with Chrome not updating FontAwesome
// applied icons; use this class name (input.checked) instead of input:checked
columnSelector_cssChecked : 'checked'
} }
}); });
@ -178,6 +182,7 @@
<h3><a href="#">Notes</a></h3> <h3><a href="#">Notes</a></h3>
<div> <div>
<ul> <ul>
<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>
<br> <br>
@ -201,11 +206,11 @@
<div> <div>
<h4>Column selector widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4> <h4>Column selector widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
<div> <div>
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location. <span class="label label-info">TIP!</span> Click on the link in the "Option" column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
</div> </div>
<table class="options tablesorter-blue" data-sortlist="[[0,0]]"> <table class="options tablesorter-blue" data-sortlist="[[0,0]]">
<thead> <thead>
<tr><th>Option</th><th class="sorter-false">Description</th></tr> <tr><th width="5%">Option</th><th class="sorter-false">Description</th></tr>
</thead> </thead>
<tbody> <tbody>
@ -301,7 +306,7 @@
<li>If the header cell does not have this attribute defined, the column selector name will be taken from the header cell internal text.</li> <li>If the header cell does not have this attribute defined, the column selector name will be taken from the header cell internal text.</li>
<li>If defined, the text contained within this attribute will replace the <code>{name}</code> string within the layout option above.</li> <li>If defined, the text contained within this attribute will replace the <code>{name}</code> string within the layout option above.</li>
</ul> </ul>
Default value: <code>&quot;data-selector-name&quot;</code> Default value: <code>'data-selector-name'</code>
</div> </div>
</td> </td>
</tr> </tr>
@ -323,7 +328,7 @@
<br> <br>
Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.<br> Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.<br>
<br> <br>
Default value: <code>&quot;Auto: &quot;</code> Default value: <code>'Auto: '</code>
</div> </div>
</td> </td>
</tr> </tr>
@ -365,11 +370,27 @@
<li>Any named priority value, (e.g. "critical" or "persistent") will flag the widget to remove that column from the selector list.</li> <li>Any named priority value, (e.g. "critical" or "persistent") will flag the widget to remove that column from the selector list.</li>
<li>Undefined priorities will default to a priority value of 1.</li> <li>Undefined priorities will default to a priority value of 1.</li>
</ul> </ul>
Default value: <code>&quot;data-priority&quot;</code> Default value: <code>'data-priority'</code>
</div> </div>
</td> </td>
</tr> </tr>
<tr id="column-selector-css-checked">
<td><a href="#" class="permalink">columnSelector_cssChecked</a></td>
<td>
This class name is added to the input checkbox when it is checked
<div class="collapsible">
<br>
This was added because we found an issue in the latest version of Chrome where the css selector <code>input:checked</code> was not correctly modifying the displayed Font Awesome replacement icon when the checkbox was toggled.<br>
<br>
Use <code>input.checked</code> (or whatever value setting this class name option contains to get around this issue). See <a href="http://jsfiddle.net/2tu38gez">this demo</a> by TheSin which uses this option to change the checkbox style.<br>
<br>
Default value: <code>'checked'</code>
</div>
</td>
</tr>
</tbody> </tbody>
</table> </table>

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

@ -103,6 +103,7 @@ tsColSel = ts.columnSelector = {
// input may not be wrapped within the layout template // input may not be wrapped within the layout template
.find('input').add( colSel.$wrapper[colId].filter('input') ) .find('input').add( colSel.$wrapper[colId].filter('input') )
.attr('data-column', colId) .attr('data-column', colId)
.toggleClass( wo.columnSelector_cssChecked, colSel.states[colId] )
.prop('checked', colSel.states[colId]) .prop('checked', colSel.states[colId])
.on('change', function(){ .on('change', function(){
colSel.states[colId] = this.checked; colSel.states[colId] = this.checked;
@ -138,6 +139,7 @@ tsColSel = ts.columnSelector = {
.find('input').add( colSel.$auto.filter('input') ) .find('input').add( colSel.$auto.filter('input') )
.attr('data-column', 'auto') .attr('data-column', 'auto')
.prop('checked', colSel.auto) .prop('checked', colSel.auto)
.toggleClass( wo.columnSelector_cssChecked, colSel.auto )
.on('change', function(){ .on('change', function(){
colSel.auto = this.checked; colSel.auto = this.checked;
$.each( colSel.$checkbox, function(i, $cb){ $.each( colSel.$checkbox, function(i, $cb){
@ -225,6 +227,7 @@ tsColSel = ts.columnSelector = {
styles.push(prefix + ' tr th:nth-child(' + column + ')'); styles.push(prefix + ' tr th:nth-child(' + column + ')');
styles.push(prefix + ' tr td:nth-child(' + column + ')'); styles.push(prefix + ' tr td:nth-child(' + column + ')');
} }
$(this).toggleClass( wo.columnSelector_cssChecked, this.checked );
}); });
if (wo.columnSelector_mediaquery){ if (wo.columnSelector_mediaquery){
colSel.$breakpoints.prop('disabled', true); colSel.$breakpoints.prop('disabled', true);
@ -253,12 +256,13 @@ tsColSel = ts.columnSelector = {
$popup.find('.tablesorter-column-selector') $popup.find('.tablesorter-column-selector')
.html( colSel.$container.html() ) .html( colSel.$container.html() )
.find('input').each(function(){ .find('input').each(function(){
var indx = $(this).attr('data-column'); var isChecked = indx === 'auto' ? colSel.auto : colSel.states[indx],
$(this).prop( 'checked', indx === 'auto' ? colSel.auto : colSel.states[indx] ); indx = $(this).toggleClass( wo.columnSelector_cssChecked, isChecked ).attr('data-column');
$(this).prop( 'checked', isChecked );
}); });
colSel.$popup = $popup.on('change', 'input', function(){ colSel.$popup = $popup.on('change', 'input', function(){
// data input // data input
indx = $(this).attr('data-column'); indx = $(this).toggleClass( wo.columnSelector_cssChecked, this.checked ).attr('data-column');
// update original popup // update original popup
colSel.$container.find('input[data-column="' + indx + '"]') colSel.$container.find('input[data-column="' + indx + '"]')
.prop('checked', this.checked) .prop('checked', this.checked)
@ -300,7 +304,10 @@ ts.addWidget({
// data attribute containing column priority // data attribute containing column priority
// duplicates how jQuery mobile uses priorities: // duplicates how jQuery mobile uses priorities:
// http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/ // http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/
columnSelector_priority : 'data-priority' columnSelector_priority : 'data-priority',
// class name added to checked checkboxes - this fixes an issue with Chrome not updating FontAwesome
// applied icons; use this class name (input.checked) instead of input:checked
columnSelector_cssChecked : 'checked'
}, },
init: function(table, thisWidget, c, wo) { init: function(table, thisWidget, c, wo) {