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

Vertical-group: Cleanup & add demo for new widget. Fixes #1469

Browse Source
This commit is contained in:
Rob Garrison 2017-12-13 14:59:44 -06:00
parent 7e938b796f
commit e496cbfe05
5 changed files with 259 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
AUTHORS
View File

@ -82,5 +82,6 @@ ced-b <cedric@cos.flag.org>
Federico-G <federicogasior@hotmail.com>
Lars <lars.bodtke@live.de>
Alex Weissman <alex@alexanderweissman.com>
Andrew Murphy <aavmurphy@users.noreply.github.com>
# Generated by tools/authors.sh

120
docs/example-widget-vertical-group.html Normal file
View File

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Vertical Group Widget</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/parsers/parser-date-weekday.js"></script>
<script src="../js/widgets/widget-vertical-group.js"></script>
<style id="css">/* Required additional CSS to make this widget work */
table.tablesorter tr:not(:last-of-type) th,
table.tablesorter tr:not(:last-of-type) td {
/* all current themes style the bottom border; we'll switch to use the top */
border-width: 1px 1px 0 0;
}
.tablesorter td.tablesorter-vertical-group-hide {
text-indent: -9999em;
border-top-color: transparent;
}
/* class added to the cell in the first row of the group */
.tablesorter td.tablesorter-vertical-group-show {}</style>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue',
widgets: ["vertical-group", "zebra"]
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Vertical Group Widget</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p class="tip">
<em>NOTE!</em>
</p>
<ul>
<li>Widget added in <span class="version">v2.29.1</span>. Thanks to <a href="https://github.com/aavmurphy">aavmurphy</a> for sharing the code!
<ul>
<li>This widget works by enabling it in the <code>widgets</code> option <em>and</em> adding a <code>tablesorter-vertical-group</code> class name to the header column.</li>
<li>Make sure to include the additional CSS shown on this page.</li>
<li>Click to sort a column. Any sorted columns with duplicate cell entries will be grouped together and the zebra striping will be adjusted.</li>
<li>Sorting multiple columns will again adjust the duplicates and zebra striping.</li>
</ul>
</li>
</ul>
<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th class="tablesorter-vertical-group sorter-weekday">Day</th>
<th class="tablesorter-vertical-group">First Name</th>
<th class="tablesorter-vertical-group">Last Name</th></tr>
</thead>
<tbody>
<tr><td>Tuesday</td><td>Peter</td><td>Jones</td></tr>
<tr><td>Thursday</td><td>Peter</td><td>Smith</td></tr>
<tr><td>Thursday</td><td>Fred</td><td>Smith</td></tr>
<tr><td>Friday</td><td>Fred</td><td>Jones</td></tr>
<tr><td>Tuesday</td><td>Mike</td><td>Snow</td></tr>
<tr><td>Monday</td><td>Mike</td><td>Jones</td></tr>
<tr><td>Wednesday</td><td>Mike</td><td>Smith</td></tr>
<tr><td>Friday</td><td>Fred</td><td>Snow</td></tr>
<tr><td>Tuesday</td><td>Fred</td><td>Smith</td></tr>
<tr><td>Thursday</td><td>Peter</td><td>Snow</td></tr>
<tr><td>Friday</td><td>Mike</td><td>Smith</td></tr>
<tr><td>Monday</td><td>Fred</td><td>Jones</td></tr>
<tr><td>Tuesday</td><td>Peter</td><td>Snow</td></tr>
<tr><td>Friday</td><td>Mike</td><td>Jones</td></tr>
<tr><td>Wednesday</td><td>Peter</td><td>Smith</td></tr>
</tbody>
</table></div>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html">
&lt;link rel="stylesheet" href="css/blue/style.css"&gt;
&lt;script src="js/jquery-latest.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.tablesorter.min.js"&gt;&lt;/script&gt;
&lt;script src="js/widgets/widget-vertical-group.min.js">&lt;/script&gt;</pre>
</div>
<h1>CSS</h1>
<div id="css">
<pre class="prettyprint lang-css"></pre>
</div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
</div>
</body>
</html>

1
docs/index.html
View File

@ -527,6 +527,7 @@
<li><a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> (<span class="version updated">v2.29.0</span>) <span class="label warning">NOTE</span> <strong>does not</strong> require the uitheme widget!</li>
</ul>
</li>
<li><span class="label label-info">Beta</span> <a href="example-widget-vertical-group.html">Vertical Group Widget</a> (<span class="version">v2.29.1</span>).</li>
<li><span class="label label-info">Beta</span> <a href="example-widget-view.html">View Widget</a> (<span class="version">v2.24.0</span>; <span class="version updated">v2.26.6</span>).</li>
<li><span class="results">&Dagger;</span> <a href="example-widget-zebra.html">Zebra stripe widget</a>.</li>
</ul>

130
js/widgets/widget-vertical-group
View File

@ -1,130 +0,0 @@
/*! Widget: vertical-group (BETA) - updated 9/27/2017 (v2.29.0) */
/* Requires tablesorter and jQuery
* Originally by @aavmurphy (Andrew Murphy)
* Adapted for tablesorter by xxxxxx
*
* This widget is licensed under the same terms at mottie/tablesorter itself, i.e. free to use
*/
/*
$.tablesorter.addWidget( {
id: 'vertical_group',
priority:99,
format: vertically_group
} ) ;
vertical_group = function ( table, config, widget_options, init_flag )
{
// -------------------------------------------------------------------------------------------------
// loop thru the header row,
// - look for .vertical-group
//
// loop thru the rows
//
// set ALWAYS_SHOW = FALSE
//
// loop thru the 1st 4 columns
//
// if this cell does not exist, skip to next row
//
// if ALWAYS_SHOW, then this cell is SHOW
//
// else if this column does not have '.vertical-group', then this cell is SHOW
//
// else if this cell is NOT the same as the cell-above, then this cell is SHOW
//
// else this cell is HIDE
//
// if this cell is SHOW, set ALWAYS_SHOW
//
// if this cell is SHOW,
// then
// set the cell class to .vertical_group_show
// else
// set the cell class to vertical_group_show
//
// TO DO add/remove classes so as not to clobber other existing classes
//
//
// TO DO add classes
//
// .vertical-group-show { background-color: white !important; }
// .vertical-group-hide { visibility: hidden; border-top: white !important;background-color: white !important; }
//
// this is all because of stripped tables
// - background-colour show be the table's background colour (or the first row's)
// - the border-color needs to be the same
//
// ------------------------------------------------------------------------------------------------
//console.groupCollapsed( 'EVENT widget tablesorter : group rows vertically' );
var rows = table.tBodies[0].rows,
header = table.tHead.rows,
is_vertical_group_col = [],
last_row = [ 'xxx', 'xxx', 'xxx', 'xxx' ] ;
//console.info( 'vertical cols widget' );
//console.info( ' . rows: ' + rows.length );
if ( table.vertical_group_lock )
{
console.info( '. STOP lock found' );
return;
}
table.vertical_group_lock = true;
for (var k = 0 ; k < 4; k++ )
{
if ( header[0].cells[ k ] && header[0].cells[ k ].className && header[0].cells[ k ].className.match( /vertical-group/i ) )
{
is_vertical_group_col[ k ] = true;
}
else
{
is_vertical_group_col[ k ] = false ;
}
}
for (var i = 0; i < rows.length; i++)
{
var always_show_cell = false ;
for (var j = 0 ; j < 4; j++ )
{
if ( ! is_vertical_group_col[ j ] ) continue;
if ( ! rows[ i ].cells[ j ] ) continue; // check 1st 4 cols .. unless it doesnt have 4 cols
//console.info( '. . row: ' + i + ' = ' + region + ' from ' + rows[ i ].cells[ 0 ].className );
var cell_data = rows[ i ].cells[ j ].innerHTML,
cell_class = rows[ i ].cells[ j ].className ;
if ( ! always_show_cell && cell_data == last_row[j] )
{
if ( cell_class != 'vertical-group-hide' ) rows[ i ].cells[ j ].className = 'vertical-group-hide';
}
else
{
always_show_cell = true ; // show
if ( cell_class != 'vertical-group-show' ) rows[ i ].cells[ j ].className = 'vertical-group-show';
}
//console.info( '. . = ' + rows[ i ].cells[ 0 ].className );
last_row[j] = cell_data ;
}
}
//console.info( '. done' );
table.vertical_group_lock = false;
//console.groupEnd();
};
*/

137
js/widgets/widget-vertical-group.js Normal file
View File

@ -0,0 +1,137 @@
/*! Widget: vertical-group (BETA) - updated 12/13/2017 (v2.29.1) */
/* Requires tablesorter and jQuery
* Originally by @aavmurphy (Andrew Murphy)
* Adapted for tablesorter by Rob Garrison - see #1469 & #1470
*
* This widget is licensed under the same terms at mottie/tablesorter itself, i.e. free to use
*/
/* jshint browser:true, jquery:true, unused:false */
/* global jQuery:false */
;(function($){
'use strict';
var ts = $.tablesorter,
tscss = ts.css;
$.extend( ts.css, {
verticalGroupHeader: 'tablesorter-vertical-group',
verticalGroupHide: 'tablesorter-vertical-group-hide',
verticalGroupShow: 'tablesorter-vertical-group-show'
});
ts.addWidget({
id: 'vertical-group',
priority: 99,
init: verticalGroup,
format: verticalGroup
});
function cleanUp( el ) {
el.removeClass(tscss.verticalGroupHide + ' ' + tscss.verticalGroupShow);
}
function setZebra( wo, $cell, indx ) {
var $row = $cell.parent();
$row
.removeClass( wo.zebra[ (indx + 1) % 2 ] )
.addClass( wo.zebra[ indx % 2] );
}
function verticalGroup( table, c, wo, init ) {
// -------------------------------------------------------------------------
// loop thru the header row,
// - look for .vertical-group
//
// loop thru the rows
//
// set ALWAYS_SHOW = FALSE
// loop thru the 1st 4 columns
// if this cell does not exist, skip to next row
// if ALWAYS_SHOW, then this cell is SHOW
// else if this column does not have '.vertical-group', then this cell is SHOW
// else if this cell is NOT the same as the cell-above, then this cell is SHOW
// else this cell is HIDE
// if this cell is SHOW, set ALWAYS_SHOW
// if this cell is SHOW,
// then
// set the cell class to .vertical_group_show
// else
// set the cell class to vertical_group_show
//
// TO DO add/remove classes so as not to clobber other existing classes
// TO DO add classes
//
// .vertical-group-show { background-color: white !important; }
// .vertical-group-hide { visibility: hidden; border-top: white !important;background-color: white !important; }
//
// this is all because of stripped tables
// - background-colour show be the table's background colour (or the first row's)
// - the border-color needs to be the same
//
// ------------------------------------------------------------------------------------------------
var tmp,
zebra_index = -1, // increments at start of loop
rows = table.tBodies[0].rows,
header = table.tHead.rows,
has_zebra = ts.hasWidget( table, 'zebra'),
is_vertical_group_col = [],
last_row = [];
if ( wo.vertical_group_lock ) {
return;
}
wo.vertical_group_lock = true;
is_vertical_group_col = $.map( c.$headerIndexed, function( el ) {
return el.hasClass( tscss.verticalGroupHeader ) ? 1 : '';
});
if ( is_vertical_group_col.join('') === '' ) {
cleanUp( $(rows).find( '.' + tscss.verticalGroupHide + ',.' + tscss.verticalGroupShow ) );
wo.vertical_group_lock = false;
return;
}
for (var i = 0; i < rows.length; i++) {
var always_show_cell = false;
for (var j = 0; j < c.columns; j++ ) {
if ( !is_vertical_group_col[ j ] || !rows[ i ].cells[ j ] ) {
zebra_index++;
continue;
}
var $cell = $( rows[ i ].cells[ j ] ),
// only group if column is sorted
isSorted = ts.isValueInArray( j, c.sortList ), // returns equivalent of an indexOf value
cell_data = $cell.html();
if ( isSorted < 0 ) {
cleanUp( $cell );
} else if ( !always_show_cell && cell_data === last_row[j] ) {
if ( !$cell.hasClass(tscss.verticalGroupHide) ) {
$cell.addClass( tscss.verticalGroupHide );
}
if ( has_zebra ) {
setZebra( wo, $cell, zebra_index );
}
$cell.removeClass( tscss.verticalGroupShow );
} else if (isSorted === 0) {
// only show cells from the first sorted column
always_show_cell = true; // show
if ( !$cell.hasClass( tscss.verticalGroupShow ) ) {
$cell.addClass( tscss.verticalGroupShow );
}
$cell.removeClass( tscss.verticalGroupHide );
if ( has_zebra ) {
// only adjust striping based on the first sorted column
setZebra( wo, $cell, isSorted ? zebra_index : ++zebra_index );
}
}
last_row[j] = cell_data;
}
}
wo.vertical_group_lock = false;
}
})(jQuery);