mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
ColumnSelector: Extra rows & colspans now supported in thead & tfoot. Fixes #501
This commit is contained in:
parent
e5a9de1896
commit
2ca475ab8a
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
@ -175,7 +175,12 @@
|
|||||||
<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.6</span>,
|
||||||
|
<ul>
|
||||||
|
<li>This widget now supports extra rows and <code>colspan</code> cells in the header & footer (not the body). The first demo has been updated to show this enhancement.</li>
|
||||||
|
<li>Added <code>columnSelector_mediaqueryHidden</code> option.</li>
|
||||||
|
</ul>
|
||||||
|
</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>
|
||||||
@ -185,7 +190,7 @@
|
|||||||
<br>
|
<br>
|
||||||
</li>
|
</li>
|
||||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
||||||
<li>This widget may not work properly if the table contains rows with <code>rowspan</code> or <code>colspan</code> settings.</li>
|
<li>This widget may not work properly if the table body contains rows with <code>rowspan</code> or <code>colspan</code> settings.</li>
|
||||||
<li>The responsive part of this widget:
|
<li>The responsive part of this widget:
|
||||||
<ul>
|
<ul>
|
||||||
<li>Uses similar parameters as those used by jQuery mobile to set <a href="http://view.jquerymobile.com/1.4.0/demos/table-column-toggle/">column priority</a>.</li>
|
<li>Uses similar parameters as those used by jQuery mobile to set <a href="http://view.jquerymobile.com/1.4.0/demos/table-column-toggle/">column priority</a>.</li>
|
||||||
@ -347,7 +352,7 @@
|
|||||||
|
|
||||||
<tr id="column-selector-mediaquery-hidden">
|
<tr id="column-selector-mediaquery-hidden">
|
||||||
<td><a href="#" class="permalink">columnSelector_mediaqueryHidden</a></td>
|
<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.
|
<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 (<span class="version">v2.23.6</span>).
|
||||||
<div class="collapsible">
|
<div class="collapsible">
|
||||||
<br>
|
<br>
|
||||||
<ul>
|
<ul>
|
||||||
@ -523,6 +528,10 @@ $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );<
|
|||||||
|
|
||||||
<table class="tablesorter custom-popup">
|
<table class="tablesorter custom-popup">
|
||||||
<thead>
|
<thead>
|
||||||
|
<tr class="tablesorter-ignoreRow">
|
||||||
|
<th colspan="3">Student</th>
|
||||||
|
<th colspan="4">Courses</th>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th data-priority="critical">Name</th>
|
<th data-priority="critical">Name</th>
|
||||||
<!-- Remove column from selection popup by including -->
|
<!-- Remove column from selection popup by including -->
|
||||||
@ -538,6 +547,10 @@ $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );<
|
|||||||
</thead>
|
</thead>
|
||||||
<tfoot>
|
<tfoot>
|
||||||
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||||||
|
<tr>
|
||||||
|
<th colspan="3">Student</th>
|
||||||
|
<th colspan="4">Courses</th>
|
||||||
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||||
|
@ -454,7 +454,7 @@
|
|||||||
|
|
||||||
<li><span class="label label-info">Beta</span> <a href="example-widget-chart.html">Chart Widget</a> (<span class="version">v2.19.0</span>).</li>
|
<li><span class="label label-info">Beta</span> <a href="example-widget-chart.html">Chart Widget</a> (<span class="version">v2.19.0</span>).</li>
|
||||||
<li><span class="results">†</span> <a href="example-widget-columns.html">Columns highlight widget</a> (v2.0.17)</li>
|
<li><span class="results">†</span> <a href="example-widget-columns.html">Columns highlight widget</a> (v2.0.17)</li>
|
||||||
<li><a href="example-widget-column-selector.html">Column selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.23.2</span>).</li>
|
<li><a href="example-widget-column-selector.html">Column selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.23.6</span>).</li>
|
||||||
<li><a href="example-widget-editable.html">Content editable widget</a> (v2.9; <span class="version updated">v2.23.0</span>).</li>
|
<li><a href="example-widget-editable.html">Content editable widget</a> (v2.9; <span class="version updated">v2.23.0</span>).</li>
|
||||||
<li><span class="label label-info">Beta</span> <a href="example-dragtable.html">Dragtable mod</a> - (jQuery UI widget for column reordering [<a href="http://stackoverflow.com/a/27770224/145346">ref</a>]; <span class="version">v2.19.0</span>).</li>
|
<li><span class="label label-info">Beta</span> <a href="example-dragtable.html">Dragtable mod</a> - (jQuery UI widget for column reordering [<a href="http://stackoverflow.com/a/27770224/145346">ref</a>]; <span class="version">v2.19.0</span>).</li>
|
||||||
<li><span class="results">†</span> Filter widget (<span class="version updated">v2.23.4</span>):
|
<li><span class="results">†</span> Filter widget (<span class="version updated">v2.23.4</span>):
|
||||||
|
@ -35,6 +35,7 @@
|
|||||||
colSel.$breakpoints = $('<style></style>').prop('disabled', true).appendTo('head');
|
colSel.$breakpoints = $('<style></style>').prop('disabled', true).appendTo('head');
|
||||||
|
|
||||||
colSel.isInitializing = true;
|
colSel.isInitializing = true;
|
||||||
|
tsColSel.setUpColspan(c, wo);
|
||||||
tsColSel.setupSelector(c, wo);
|
tsColSel.setupSelector(c, wo);
|
||||||
|
|
||||||
if (wo.columnSelector_mediaquery) {
|
if (wo.columnSelector_mediaquery) {
|
||||||
@ -103,10 +104,11 @@
|
|||||||
tsColSel.updateBreakpoints(c, wo);
|
tsColSel.updateBreakpoints(c, wo);
|
||||||
tsColSel.updateCols(c, wo);
|
tsColSel.updateCols(c, wo);
|
||||||
}
|
}
|
||||||
|
tsColSel.adjustColspans( c, wo );
|
||||||
},
|
},
|
||||||
|
|
||||||
setupSelector: function(c, wo) {
|
setupSelector: function(c, wo) {
|
||||||
var name,
|
var index, name,
|
||||||
colSel = c.selector,
|
colSel = c.selector,
|
||||||
$container = colSel.$container,
|
$container = colSel.$container,
|
||||||
useStorage = wo.columnSelector_saveColumns && ts.storage,
|
useStorage = wo.columnSelector_saveColumns && ts.storage,
|
||||||
@ -121,19 +123,19 @@
|
|||||||
colSel.$wrapper = [];
|
colSel.$wrapper = [];
|
||||||
colSel.$checkbox = [];
|
colSel.$checkbox = [];
|
||||||
// populate the selector container
|
// populate the selector container
|
||||||
c.$table.children('thead').find('tr:first th', c.table).each(function() {
|
for ( index = 0; index < c.columns; index++ ) {
|
||||||
var $this = $(this),
|
var $header = c.$headerIndexed[ index ],
|
||||||
// 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 = $header.attr(wo.columnSelector_priority) || 1,
|
||||||
colId = $this.attr('data-column'),
|
colId = $header.attr('data-column'),
|
||||||
col = ts.getColumnData( c.table, c.headers, colId ),
|
col = ts.getColumnData( c.table, c.headers, colId ),
|
||||||
state = ts.getData(this, col, 'columnSelector');
|
state = ts.getData( $header, 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)
|
||||||
if ( isNaN(priority) && priority.length > 0 || state === 'disable' ||
|
if ( isNaN(priority) && priority.length > 0 || state === 'disable' ||
|
||||||
( wo.columnSelector_columns[colId] && wo.columnSelector_columns[colId] === 'disable') ) {
|
( wo.columnSelector_columns[colId] && wo.columnSelector_columns[colId] === 'disable') ) {
|
||||||
return true; // goto next
|
continue; // goto next
|
||||||
}
|
}
|
||||||
|
|
||||||
// set default state; storage takes priority
|
// set default state; storage takes priority
|
||||||
@ -143,7 +145,7 @@
|
|||||||
colSel.$column[colId] = $(this);
|
colSel.$column[colId] = $(this);
|
||||||
|
|
||||||
// set default col title
|
// set default col title
|
||||||
name = $this.attr(wo.columnSelector_name) || $this.text();
|
name = $header.attr(wo.columnSelector_name) || $header.text();
|
||||||
if ($container.length) {
|
if ($container.length) {
|
||||||
colSel.$wrapper[colId] = $(wo.columnSelector_layout.replace(/\{name\}/g, name)).appendTo($container);
|
colSel.$wrapper[colId] = $(wo.columnSelector_layout.replace(/\{name\}/g, name)).appendTo($container);
|
||||||
colSel.$checkbox[colId] = colSel.$wrapper[colId]
|
colSel.$checkbox[colId] = colSel.$wrapper[colId]
|
||||||
@ -153,15 +155,17 @@
|
|||||||
.toggleClass( wo.columnSelector_cssChecked, colSel.states[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;
|
// ensure states is accurate
|
||||||
|
var colId = $(this).attr('data-column');
|
||||||
|
c.selector.states[colId] = this.checked;
|
||||||
tsColSel.updateCols(c, wo);
|
tsColSel.updateCols(c, wo);
|
||||||
}).change();
|
}).change();
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setupBreakpoints: function(c, wo){
|
setupBreakpoints: function(c, wo) {
|
||||||
var colSel = c.selector;
|
var colSel = c.selector;
|
||||||
|
|
||||||
// add responsive breakpoints
|
// add responsive breakpoints
|
||||||
@ -223,6 +227,7 @@
|
|||||||
if (wo.columnSelector_saveColumns && ts.storage) {
|
if (wo.columnSelector_saveColumns && ts.storage) {
|
||||||
ts.storage( c.$table[0], 'tablesorter-columnSelector-auto', { auto : colSel.auto } );
|
ts.storage( c.$table[0], 'tablesorter-columnSelector-auto', { auto : colSel.auto } );
|
||||||
}
|
}
|
||||||
|
tsColSel.adjustColspans( c, wo );
|
||||||
// trigger columnUpdate if auto is true (it gets skipped in updateCols()
|
// trigger columnUpdate if auto is true (it gets skipped in updateCols()
|
||||||
if (colSel.auto) {
|
if (colSel.auto) {
|
||||||
c.$table.trigger(wo.columnSelector_updated);
|
c.$table.trigger(wo.columnSelector_updated);
|
||||||
@ -312,9 +317,70 @@
|
|||||||
if (wo.columnSelector_saveColumns && ts.storage) {
|
if (wo.columnSelector_saveColumns && ts.storage) {
|
||||||
ts.storage( c.$table[0], 'tablesorter-columnSelector', colSel.states );
|
ts.storage( c.$table[0], 'tablesorter-columnSelector', colSel.states );
|
||||||
}
|
}
|
||||||
|
tsColSel.adjustColspans( c, wo );
|
||||||
c.$table.trigger(wo.columnSelector_updated);
|
c.$table.trigger(wo.columnSelector_updated);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
setUpColspan: function(c, wo) {
|
||||||
|
var index, span, nspace,
|
||||||
|
hasSpans = false,
|
||||||
|
$cells = c.$table
|
||||||
|
.add( $(c.namespace + '_extra_table') )
|
||||||
|
.children('thead, tfoot')
|
||||||
|
.children('tr')
|
||||||
|
.children('th, td'),
|
||||||
|
len = $cells.length;
|
||||||
|
for ( index = 0; index < len; index++ ) {
|
||||||
|
span = $cells[ index ].colSpan;
|
||||||
|
if ( span > 1 ) {
|
||||||
|
hasSpans = true;
|
||||||
|
$cells.eq( index )
|
||||||
|
.addClass( c.namespace.slice( 1 ) + 'columnselectorHasSpan' )
|
||||||
|
.attr( 'data-col-span', span );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// only add resize end if using media queries
|
||||||
|
if ( hasSpans && wo.columnSelector_mediaquery ) {
|
||||||
|
nspace = c.namespace.slice( 1 ) + 'columnselector';
|
||||||
|
// Setup window.resizeEnd event
|
||||||
|
$( window )
|
||||||
|
.off( nspace )
|
||||||
|
.on( 'resize' + nspace, ts.window_resize )
|
||||||
|
.on( 'resizeEnd' + nspace, function() {
|
||||||
|
// IE calls resize when you modify content, so we have to unbind the resize event
|
||||||
|
// so we don't end up with an infinite loop. we can rebind after we're done.
|
||||||
|
$win.off( 'resize' + nspace, ts.window_resize );
|
||||||
|
tsColSel.adjustColspans( c, wo );
|
||||||
|
$win.on( 'resize' + nspace, ts.window_resize );
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
adjustColspans: function(c, wo) {
|
||||||
|
var index, cols, col, span, end,
|
||||||
|
colSel = c.selector,
|
||||||
|
autoModeOn = colSel.auto,
|
||||||
|
$colspans = $( c.namespace + 'columnselectorHasSpan' ),
|
||||||
|
len = $colspans.length;
|
||||||
|
if ( len ) {
|
||||||
|
for ( index = 0; index < len; index++ ) {
|
||||||
|
col = parseInt( $colspans.eq(index).attr('data-column'), 10 );
|
||||||
|
span = parseInt( $colspans.eq(index).attr('data-col-span'), 10 );
|
||||||
|
end = col + span;
|
||||||
|
for ( cols = col; cols < end; cols++ ) {
|
||||||
|
if ( !autoModeOn && colSel.states[ cols ] === false ||
|
||||||
|
autoModeOn && c.$headerIndexed[ cols ] && !c.$headerIndexed[ cols ].is(':visible') ) {
|
||||||
|
span--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ( span ) {
|
||||||
|
$colspans.eq(index).show()[0].colSpan = span;
|
||||||
|
} else {
|
||||||
|
$colspans.eq(index).hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
attachTo : function(table, elm) {
|
attachTo : function(table, elm) {
|
||||||
table = $(table)[0];
|
table = $(table)[0];
|
||||||
var colSel, wo, indx,
|
var colSel, wo, indx,
|
||||||
@ -349,6 +415,16 @@
|
|||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/* Add window resizeEnd event (also used by scroller widget) */
|
||||||
|
ts.window_resize = function() {
|
||||||
|
if ( ts.timer_resize ) {
|
||||||
|
clearTimeout( ts.timer_resize );
|
||||||
|
}
|
||||||
|
ts.timer_resize = setTimeout( function() {
|
||||||
|
$( window ).trigger( 'resizeEnd' );
|
||||||
|
}, 250 );
|
||||||
|
};
|
||||||
|
|
||||||
ts.addWidget({
|
ts.addWidget({
|
||||||
id: 'columnSelector',
|
id: 'columnSelector',
|
||||||
priority: 10,
|
priority: 10,
|
||||||
|
@ -88,7 +88,7 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/* Add window resizeEnd event */
|
/* Add window resizeEnd event (also used by columnSelector widget) */
|
||||||
ts.window_resize = function() {
|
ts.window_resize = function() {
|
||||||
if ( ts.timer_resize ) {
|
if ( ts.timer_resize ) {
|
||||||
clearTimeout( ts.timer_resize );
|
clearTimeout( ts.timer_resize );
|
||||||
|
Loading…
Reference in New Issue
Block a user