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>
|
||||
<div>
|
||||
<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 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>
|
||||
@ -185,7 +190,7 @@
|
||||
<br>
|
||||
</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:
|
||||
<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>
|
||||
@ -347,7 +352,7 @@
|
||||
|
||||
<tr id="column-selector-mediaquery-hidden">
|
||||
<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">
|
||||
<br>
|
||||
<ul>
|
||||
@ -523,6 +528,10 @@ $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );<
|
||||
|
||||
<table class="tablesorter custom-popup">
|
||||
<thead>
|
||||
<tr class="tablesorter-ignoreRow">
|
||||
<th colspan="3">Student</th>
|
||||
<th colspan="4">Courses</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-priority="critical">Name</th>
|
||||
<!-- Remove column from selection popup by including -->
|
||||
@ -538,6 +547,10 @@ $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );<
|
||||
</thead>
|
||||
<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 colspan="3">Student</th>
|
||||
<th colspan="4">Courses</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<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="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><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>):
|
||||
|
@ -35,6 +35,7 @@
|
||||
colSel.$breakpoints = $('<style></style>').prop('disabled', true).appendTo('head');
|
||||
|
||||
colSel.isInitializing = true;
|
||||
tsColSel.setUpColspan(c, wo);
|
||||
tsColSel.setupSelector(c, wo);
|
||||
|
||||
if (wo.columnSelector_mediaquery) {
|
||||
@ -103,10 +104,11 @@
|
||||
tsColSel.updateBreakpoints(c, wo);
|
||||
tsColSel.updateCols(c, wo);
|
||||
}
|
||||
tsColSel.adjustColspans( c, wo );
|
||||
},
|
||||
|
||||
setupSelector: function(c, wo) {
|
||||
var name,
|
||||
var index, name,
|
||||
colSel = c.selector,
|
||||
$container = colSel.$container,
|
||||
useStorage = wo.columnSelector_saveColumns && ts.storage,
|
||||
@ -121,19 +123,19 @@
|
||||
colSel.$wrapper = [];
|
||||
colSel.$checkbox = [];
|
||||
// populate the selector container
|
||||
c.$table.children('thead').find('tr:first th', c.table).each(function() {
|
||||
var $this = $(this),
|
||||
for ( index = 0; index < c.columns; index++ ) {
|
||||
var $header = c.$headerIndexed[ index ],
|
||||
// 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,
|
||||
colId = $this.attr('data-column'),
|
||||
priority = $header.attr(wo.columnSelector_priority) || 1,
|
||||
colId = $header.attr('data-column'),
|
||||
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
|
||||
// include getData check (includes 'columnSelector-false' class, data attribute, etc)
|
||||
if ( isNaN(priority) && priority.length > 0 || state === 'disable' ||
|
||||
( wo.columnSelector_columns[colId] && wo.columnSelector_columns[colId] === 'disable') ) {
|
||||
return true; // goto next
|
||||
continue; // goto next
|
||||
}
|
||||
|
||||
// set default state; storage takes priority
|
||||
@ -143,7 +145,7 @@
|
||||
colSel.$column[colId] = $(this);
|
||||
|
||||
// set default col title
|
||||
name = $this.attr(wo.columnSelector_name) || $this.text();
|
||||
name = $header.attr(wo.columnSelector_name) || $header.text();
|
||||
if ($container.length) {
|
||||
colSel.$wrapper[colId] = $(wo.columnSelector_layout.replace(/\{name\}/g, name)).appendTo($container);
|
||||
colSel.$checkbox[colId] = colSel.$wrapper[colId]
|
||||
@ -153,11 +155,13 @@
|
||||
.toggleClass( wo.columnSelector_cssChecked, colSel.states[colId] )
|
||||
.prop('checked', colSel.states[colId])
|
||||
.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);
|
||||
}).change();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
@ -223,6 +227,7 @@
|
||||
if (wo.columnSelector_saveColumns && ts.storage) {
|
||||
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()
|
||||
if (colSel.auto) {
|
||||
c.$table.trigger(wo.columnSelector_updated);
|
||||
@ -312,9 +317,70 @@
|
||||
if (wo.columnSelector_saveColumns && ts.storage) {
|
||||
ts.storage( c.$table[0], 'tablesorter-columnSelector', colSel.states );
|
||||
}
|
||||
tsColSel.adjustColspans( c, wo );
|
||||
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) {
|
||||
table = $(table)[0];
|
||||
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({
|
||||
id: 'columnSelector',
|
||||
priority: 10,
|
||||
|
@ -88,7 +88,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
/* Add window resizeEnd event */
|
||||
/* Add window resizeEnd event (also used by columnSelector widget) */
|
||||
ts.window_resize = function() {
|
||||
if ( ts.timer_resize ) {
|
||||
clearTimeout( ts.timer_resize );
|
||||
|
Loading…
Reference in New Issue
Block a user