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

Grouping: add keyboard accessibility to group headers. See #260

Browse Source
This commit is contained in:
Mottie 2015-04-09 15:00:10 -05:00
parent d3d39f7560
commit a4bb1497f0
3 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/js/widgets/widget-grouping.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -151,6 +151,7 @@ tr.group-header.collapsed td i {
<ul> <ul>
<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>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>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.21.6</span>, group headers are now keyboard accessible using <kbd>Tab</kbd>; and pressing <kbd>Enter</kbd> while the header has focus will toggle the group header, or use <kbd>Shift</kbd> + <kbd>Enter</kbd> to toggle all groups.</li>
<li>In <span class="version">v2.21.0</span> <li>In <span class="version">v2.21.0</span>
<ul> <ul>
<li>Added <code>group_checkbox</code> option to allow setting the parsed text from the "parser-input-select.js" checkbox parser.</li> <li>Added <code>group_checkbox</code> option to allow setting the parsed text from the "parser-input-select.js" checkbox parser.</li>

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

@ -110,7 +110,7 @@ ts.grouping = {
currentGroup = wo.group_formatter((currentGroup || '').toString(), column, table, c, wo) || currentGroup; currentGroup = wo.group_formatter((currentGroup || '').toString(), column, table, c, wo) || currentGroup;
} }
$rows.eq(rowIndex).before('<tr class="group-header ' + c.selectorRemove.slice(1) + $rows.eq(rowIndex).before('<tr class="group-header ' + c.selectorRemove.slice(1) +
'" unselectable="on"><td colspan="' + '" unselectable="on"' + ( c.tabIndex ? ' tabindex="0"' : '' ) + '><td colspan="' +
c.columns + '">' + (wo.group_collapsible ? '<i/>' : '') + '<span class="group-name">' + c.columns + '">' + (wo.group_collapsible ? '<i/>' : '') + '<span class="group-name">' +
currentGroup + '</span><span class="group-count"></span></td></tr>'); currentGroup + '</span><span class="group-count"></span></td></tr>');
if (wo.group_saveGroups && !savedGroup && wo.group_collapsed && wo.group_collapsible) { if (wo.group_saveGroups && !savedGroup && wo.group_collapsed && wo.group_collapsible) {
@ -157,13 +157,15 @@ ts.grouping = {
if (wo.group_collapsible) { if (wo.group_collapsible) {
wo.group_currentGroups = []; wo.group_currentGroups = [];
// .on() requires jQuery 1.7+ // .on() requires jQuery 1.7+
c.$table.on('click toggleGroup', 'tr.group-header', function(event){ c.$table.on('click toggleGroup keyup', 'tr.group-header', function(event){
event.stopPropagation(); event.stopPropagation();
// pressing enter will toggle the group
if (event.type === 'keyup' && event.which !== 13) { return; }
var isCollapsed, $groups, indx, var isCollapsed, $groups, indx,
$this = $(this), $this = $(this),
name = $this.find('.group-name').text().toLowerCase(); name = $this.find('.group-name').text().toLowerCase();
// use shift-click to toggle ALL groups // use shift-click to toggle ALL groups
if (event.type === 'click' && event.shiftKey) { if (event.shiftKey && (event.type === 'click' || event.type ==='keyup')) {
$this.siblings('.group-header').trigger('toggleGroup'); $this.siblings('.group-header').trigger('toggleGroup');
} }
$this.toggleClass('collapsed'); $this.toggleClass('collapsed');