library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-12-05 05:04:20 +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
// duplicates how jQuery mobile uses priorities:
// 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>
<div>
<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>
In <span class="version">v2.17.0</span>, a method to refresh the column selector was added.<br>
<br>
@ -201,11 +206,11 @@
<div>
<h4>Column selector widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
<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>
<table class="options tablesorter-blue" data-sortlist="[[0,0]]">
<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>
<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 defined, the text contained within this attribute will replace the <code>{name}</code> string within the layout option above.</li>
</ul>
Default value: <code>&quot;data-selector-name&quot;</code>
Default value: <code>'data-selector-name'</code>
</div>
</td>
</tr>
@ -323,7 +328,7 @@
<br>
Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.<br>
<br>
Default value: <code>&quot;Auto: &quot;</code>
Default value: <code>'Auto: '</code>
</div>
</td>
</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>Undefined priorities will default to a priority value of 1.</li>
</ul>
Default value: <code>&quot;data-priority&quot;</code>
Default value: <code>'data-priority'</code>
</div>
</td>
</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>
</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
.find('input').add( colSel.$wrapper[colId].filter('input') )
.attr('data-column', colId)
.toggleClass( wo.columnSelector_cssChecked, colSel.states[colId] )
.prop('checked', colSel.states[colId])
.on('change', function(){
colSel.states[colId] = this.checked;
@ -138,6 +139,7 @@ tsColSel = ts.columnSelector = {
.find('input').add( colSel.$auto.filter('input') )
.attr('data-column', 'auto')
.prop('checked', colSel.auto)
.toggleClass( wo.columnSelector_cssChecked, colSel.auto )
.on('change', function(){
colSel.auto = this.checked;
$.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 td:nth-child(' + column + ')');
}
$(this).toggleClass( wo.columnSelector_cssChecked, this.checked );
});
if (wo.columnSelector_mediaquery){
colSel.$breakpoints.prop('disabled', true);
@ -253,12 +256,13 @@ tsColSel = ts.columnSelector = {
$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] );
var isChecked = 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(){
// data input
indx = $(this).attr('data-column');
indx = $(this).toggleClass( wo.columnSelector_cssChecked, this.checked ).attr('data-column');
// update original popup
colSel.$container.find('input[data-column="' + indx + '"]')
.prop('checked', this.checked)
@ -300,7 +304,10 @@ ts.addWidget({
// data attribute containing column priority
// duplicates how jQuery mobile uses priorities:
// 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) {