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

added group-false & shift-click group header to toggle all groups. Fixes #344

Browse Source
This commit is contained in:
Mottie 2013-10-01 21:51:04 -05:00
parent 09aae27676
commit b6635c4381
3 changed files with 81 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/css/jq.css
View File

@ -52,6 +52,7 @@ p.tip em, div.tip em {padding: 2px; background-color: #6cf; color: #fff;}
span.tip em {padding: 0 2px;background-color: #00ce53; color: #fff; font-size:90%; }
span.tip.old em { background-color: #cfd; color: #000; }
span.warn em { background-color: #ce5300; }
.ui-slider .ui-slider-handle { width: 0.8em; height: 0.8em; }
div.digg {float: right;}
.next-up { padding-top: 10px; font-size: 90%; }
.narrow-block { width: 50%; margin: 50px auto; }

107
docs/example-widget-grouping.html
View File

@ -5,13 +5,12 @@
<title>jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jq.css">
<link href="../css/filter.formatter.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
@ -29,6 +28,10 @@
.group-hidden {
display: none;
}
.group-header, .group-header td {
user-select: none;
-moz-user-select: none;
}
/* collapsed arrow */
tr.group-header td i {
display: inline-block;
@ -39,6 +42,8 @@
border-right: 4px solid #888;
border-left: 4px solid transparent;
margin-right: 7px;
user-select: none;
-moz-user-select: none;
}
tr.group-header.collapsed td i {
border-top: 5px solid transparent;
@ -56,6 +61,15 @@
<script src="../js/parsers/parser-input-select.js"></script>
<script src="../js/widgets/widget-grouping.js"></script>
<script>
$(function(){
$('.accordion').accordion({
heightStyle: 'content',
collapsible : true
});
});
</script>
<script id="js">$(function(){
$("table").tablesorter({
@ -67,7 +81,8 @@
},
widgets: ['group'],
widgetOptions: {
group_collapsible : true, // make the group header clickable and collapse the rows below it.
group_collapsible : true, // make the group header clickable and collapse the rows below it.
group_collapsed : false, // start with all groups collapsed (if true)
group_count : ' ({num})', // if not false, the "{num}" string is replaced with the number of rows in the group
// change these default date names based on your language preferences
group_months : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
@ -97,39 +112,62 @@
</div>
<div id="main">
<p class="tip">
<em>NOTE!</em>
<p></p>
<br>
<div class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
<li>Please do not use this widget in very large tables or when your table includes multiple tbodies.</li>
<li>Please do not use this widget in very large tables (it might be really slow) <del>or when your table includes multiple tbodies</del>.</li>
<li>In <span class="version">v2.11</span>:
<ul>
<li>The grouping widget now works across multiple tbodies.</li>
<li>Added <code>group-false</code> header option which disables the grouping widget for a specific column.</li>
<li>Added the <code>group_collapsed</code> option - get more details in the options block below.</li>
<li>You can now toggle <strong>all</strong> group rows by holding down the shift key while clicking on a group header.</li>
<li>This widget now works properly with the pager addon (pager addon updated).</li>
</ul>
</li>
<li>Clicking on any of the sortable header cells will cause the column below it to sort and add a group header.</li>
<li>Group widget options include:
<ul>
<li><code>group_collapsible</code> - when <code>true</code> the group headers become clickable and collapse the rows below it.</li>
<li><code>group_count</code> - Allows you to add custom formatting, or remove, the group count within the group header. Set it to <code>false</code> or an empty string to remove the count.</li>
<li><code>group_months</code>, <code>group_week</code> and <code>group_time</code> - Name arrays included so that the language of the date groups can be modified easily.</li>
<li><code>group_formatter</code> - Use this function to modify the group header text before it gets applied. It provides various parameters to make it work for any of the table columns and data. See the comments in the example below for more details.</li>
</ul>
</li>
<li>Group header class names (when changing the grouping, notice that the <em>sort doesn't change, just the position and names of the group headers</em>):
<ul>
<li><code>"group-word"</code> (same as <code>"group-word-1"</code>) - group the rows using the first word it finds in the column's parsed data.</li>
<li><code>"group-word-n"</code> (<code>"n"</code> can be any number) - group the rows using the nth word in the column<span class="remark">*</span>.</li>
<li><code>"group-letter"</code> (same as <code>"group-letter-1"</code>) - group the rows using the first letter it finds in the column's parsed data.</li>
<li><code>"group-letter-n"</code> (<code>"n"</code> can be any number) - group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data.</li>
<li><code>"group-number"</code> (same as <code>"group-number-1"</code>) - group the rows by the number it finds in the column (step of one).</li>
<li><code>"group-number-n"</code> (<code>"n"</code> can be any number) - group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc</li>
<li><code>"group-date"</code> - group the rows by full date (this shows the current UTC time corrected for your time zone)</li>
<li><code>"group-date-year"</code> - group the rows by year</li>
<li><code>"group-date-month"</code> - group the rows by month<span class="remark">*</span></li>
<li><code>"group-date-day"</code> - group the rows by month/day<span class="remark">*</span></li>
<li><code>"group-date-week"</code> - group the rows by day of the week<span class="remark">*</span></li>
<li><code>"group-date-time"</code> - group the rows by time<span class="remark">*</span></li>
</ul>
<span class="remark">*</span> When sorting some columns, different group headers with the same group name may exist (try "group-date-week" and "group-date-time"). To make these columns sort specifically by the group you want, you'll need to modify the parser.
</li>
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
<h3>Group widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
<ul>
<li><code>group_collapsible</code> - when <code>true</code> the group headers become clickable and collapse the rows below it.</li>
<li><code>group_collapsed</code> - when <code>true</code> and <code>group_collapsible</code> is also <code>true</code>, all groups will start collapsed (<span class="version">v2.11</span>).</li>
<li><code>group_count</code> - Allows you to add custom formatting, or remove, the group count within the group header. Set it to <code>false</code> or an empty string to remove the count.</li>
<li><code>group_months</code>, <code>group_week</code> and <code>group_time</code> - Name arrays included so that the language of the date groups can be modified easily.</li>
<li><code>group_formatter</code> - Use this function to modify the group header text before it gets applied. It provides various parameters to make it work for any of the table columns and data. See the comments in the example below for more details.</li>
</ul>
</div>
<h3><a href="#">Header Class Names</a></h3>
<div>
<h3>Group header class names (when changing the grouping, notice that the <em>sort doesn't change, just the position and names of the group headers</em>):</h3>
<ul>
<li><code>"group-word"</code> (same as <code>"group-word-1"</code>) - group the rows using the first word it finds in the column's parsed data.</li>
<li><code>"group-word-n"</code> (<code>"n"</code> can be any number) - group the rows using the nth word in the column<span class="remark">*</span>.</li>
<li><code>"group-letter"</code> (same as <code>"group-letter-1"</code>) - group the rows using the first letter it finds in the column's parsed data.</li>
<li><code>"group-letter-n"</code> (<code>"n"</code> can be any number) - group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data.</li>
<li><code>"group-number"</code> (same as <code>"group-number-1"</code>) - group the rows by the number it finds in the column (step of one).</li>
<li><code>"group-number-n"</code> (<code>"n"</code> can be any number) - group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc</li>
<li><code>"group-date"</code> - group the rows by full date (this shows the current UTC time corrected for your time zone)</li>
<li><code>"group-date-year"</code> - group the rows by year</li>
<li><code>"group-date-month"</code> - group the rows by month<span class="remark">*</span></li>
<li><code>"group-date-day"</code> - group the rows by month/day<span class="remark">*</span></li>
<li><code>"group-date-week"</code> - group the rows by day of the week<span class="remark">*</span></li>
<li><code>"group-date-time"</code> - group the rows by time<span class="remark">*</span></li>
<li><code>"group-false"</code> - disable grouping of rows for a column (<span class="version">v2.11</span>).</li>
</ul>
<span class="remark">*</span> When sorting some columns, different group headers with the same group name may exist (try "group-date-week" and "group-date-time"). To make these columns sort specifically by the group you want, you'll need to modify the parser.
</div>
</div>
</p>
@ -204,7 +242,8 @@ $(function(){
},
widgets: [&#39;group&#39;],
widgetOptions: {
group_collapsible : true, // make the group header clickable and collapse the rows below it.
group_collapsible : true, // make the group header clickable and collapse the rows below it.
group_collapsed : false, // start with all groups collapsed
group_count : &#39; ({num})&#39;, // if not false, the &quot;{num}&quot; string is replaced with the number of rows in the group
// change these default date names based on your language preferences
group_months : [ &#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;, &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39; ],
@ -213,7 +252,7 @@ $(function(){
group_formatter : function(txt, col, table, c, wo) {
// txt = current text; col = current column
// table = current table (DOM); c = table.config; wo = table.config.widgetOptions
if (col === 7) {
if (col === 7 && txt.indexOf('GMT') &gt; 0) {
// remove &quot;GMT-0000 (xxxx Standard Time)&quot; from the end of the full date
txt = txt.substring(0, txt.indexOf(&#39;GMT&#39;));
}

9
js/widgets/widget-grouping.js
View File

@ -62,10 +62,15 @@ ts.addWidget({
init: function(table, thisWidget, c, wo){
if (wo.group_collapsible) {
// .on() requires jQuery 1.7+
c.$table.on('click', 'tr.group-header', function(){
c.$table.on('click toggleGroup', 'tr.group-header', function(e){
// use shift-click to toggle ALL groups
if (e.type === 'click' && e.shiftKey) {
$(this).siblings('.group-header').trigger('toggleGroup');
}
$(this).toggleClass('collapsed');
// nextUntil requires jQuery 1.4+
$(this).nextUntil('tr.group-header').toggleClass('group-hidden', $(this).hasClass('collapsed') );
e.stopPropagation();
});
}
},
@ -80,7 +85,7 @@ ts.addWidget({
// clear pager saved spacer height (in case the rows are collapsed)
$.data(table, 'pagerSavedHeight', 0);
}
if (col >= 0) {
if (col >= 0 && !c.$headers.eq(col).hasClass('group-false')) {
if (c.debug){ time = new Date(); }
for (k = 0; k < c.$tbodies.length; k++) {
n = c.cache[k].normalized;