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

Add new exemple with grouping widget + filter widget + childrow widget

Browse Source 
Exclude group-header class in filter widget
Exclude cssChildRow class in grouping widget
Change calculation of colspan in grouping widget
Add !important for group-hidden class
This commit is contained in:
Hugot Maxime 2013-11-12 00:50:00 +01:00
parent ce7e0836c0
commit 9923be2be9
4 changed files with 165 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
docs/example-widget-grouping-filter-childrows.html Normal file
View File

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget</title>
<!-- jQuery -->
<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/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<style id="css">
tr.group-header td {
background: #eee;
}
.group-name {
text-transform: uppercase;
font-weight: bold;
}
.group-count {
color: #999;
}
.group-hidden {
display: none !important;
}
.group-header, .group-header td {
user-select: none;
-moz-user-select: none;
}
/* collapsed arrow */
tr.group-header td i {
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid #888;
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;
border-bottom: 5px solid transparent;
border-left: 5px solid #888;
border-right: 0;
margin-right: 10px;
}
</style>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<!-- grouping widget -->
<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({
theme : 'blue',
sortList : [[1,0]],
widgets: ['group','filter'],
widgetOptions: {
group_collapsible : true,
group_collapsed : false,
group_count : false,
filter_childRows : false,
}
});
$('.tablesorter-childRow td').hide();
$('.tablesorter').delegate('.toggle', 'click' ,function(){
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
return false;
});
});</script>
</head>
<body id="group">
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Grouping Rows Widget</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th class="Customer group-false"></th>
<th class="group-word">Order</th>
<th class="group-false">Statut</th>
<th class="group-false">Priority</th>
<th class="group-false">Price</th>
</tr>
</thead>
<tbody>
<tr><td rowspan="3"><a href="#" class="toggle">Good Toys<a></td><td>USA</td><td>80%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>1561651</td><td>finish</td><td>0</td><td>$5</td></tr>
<tr class="tablesorter-childRow"><td>558815</td><td>finish</td><td>0</td><td>$55</td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">Cycle Clearance</a></td><td>FRANCE</td><td>25%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>21485213</td><td>in progress</td><td>2</td><td>$7</td></tr>
<tr class="tablesorter-childRow"><td>12547854</td><td>finish</td><td>0</td><td>$18</td></tr>
<tr><td rowspan="5"><a href="#" class="toggle">Cycle Initial Bike Company<a></td><td>USA</td><td>36%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>12574521</td><td>in progress</td><td>1</td><td>$5</td></tr>
<tr class="tablesorter-childRow"><td>7895452</td><td>in progress</td><td>2</td><td>$78</td></tr>
<tr class="tablesorter-childRow"><td>1542021</td><td>finish</td><td>0</td><td>$28</td></tr>
<tr class="tablesorter-childRow"><td>4489885</td><td>finish</td><td>0</td><td>$18</td></tr>
<tr><td rowspan="5"><a href="#" class="toggle">Sports Store<a></td><td>USA</td><td>90%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>18915</td><td>in progress</td><td>2</td><td>$5</td></tr>
<tr class="tablesorter-childRow"><td>5402574</td><td>in progress</td><td>2</td><td>$78</td></tr>
<tr class="tablesorter-childRow"><td>26478</td><td>finish</td><td>0</td><td>$28</td></tr>
<tr class="tablesorter-childRow"><td>25682</td><td>finish</td><td>0</td><td>$18</td></tr>
<tr><td rowspan="5"><a href="#" class="toggle">Locks Company<a></td><td>UK</td><td>24%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>18915</td><td>in progress</td><td>2</td><td>$5</td></tr>
<tr class="tablesorter-childRow"><td>5402574</td><td>in progress</td><td>1</td><td>$78</td></tr>
<tr class="tablesorter-childRow"><td>26478</td><td>finish</td><td>0</td><td>$28</td></tr>
<tr class="tablesorter-childRow"><td>25682</td><td>finish</td><td>0</td><td>$18</td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">Famous Bike Shop<a></td><td>UK</td><td>12%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>185406</td><td>in progress</td><td>2</td><td>$5</td></tr>
<tr class="tablesorter-childRow"><td>541265</td><td>in progress</td><td>2</td><td>$78</td></tr>
</tbody>
</table>
</div>
</body>
</html>

1
docs/index.html
View File

@ -307,6 +307,7 @@
</li>
<li><a href="example-widget-build-table.html">Build Table Widget</a> (<span class="version">v2.11</span>).</li>
<li><a href="example-widget-grouping.html">Grouping rows Widget</a> (v2.8; <span class="version updated">v2.13</span>).</li>
<li><a href="example-widget-grouping-filter-childrows.html">Grouping rows Widget + filter + child rows</a></li>
<li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.9</span>)</li>
<li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.8.3</span>)</li>
<li><a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>

2
js/jquery.tablesorter.widgets.js
View File

@ -793,7 +793,7 @@ ts.filter = {
for (tbodyIndex = 0; tbodyIndex < $tbodies.length; tbodyIndex++ ) {
if ($tbodies.eq(tbodyIndex).hasClass(ts.css.info)) { continue; } // ignore info blocks, issue #264
$tbody = ts.processTbody(table, $tbodies.eq(tbodyIndex), true);
$rows = $tbody.children('tr').not('.' + c.cssChildRow);
$rows = $tbody.children('tr').not('.' + c.cssChildRow).not('.group-header');
len = $rows.length;
if (combinedFilters === '' || wo.filter_serversideFiltering) {
$tbody.children().show().removeClass(wo.filter_filteredRow);

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

@ -99,7 +99,7 @@ ts.addWidget({
for (k = 0; k < c.$tbodies.length; k++) {
n = c.cache[k].normalized;
group = ''; // clear grouping across tbodies
$tr = c.$tbodies.eq(k).children('tr');
$tr = c.$tbodies.eq(k).children('tr').not('.' + c.cssChildRow );
if (wo.group_collapsed && wo.group_collapsible) {
$tr.addClass('group-hidden');
}
@ -119,7 +119,7 @@ ts.addWidget({
curr = wo.group_formatter((curr || '').toString(), col, table, c, wo) || curr;
}
$tr.eq(j).before('<tr class="group-header ' + c.selectorRemove.slice(1) + (wo.group_collapsed && wo.group_collapsible ? ' collapsed' : '') +
'" unselectable="on"><td colspan="' + (c.columns+1) + '">' + (wo.group_collapsible ? '<i/>' : '') + '<span class="group-name">' +
'" unselectable="on"><td colspan="' + (c.columns) + '">' + (wo.group_collapsible ? '<i/>' : '') + '<span class="group-name">' +
curr + '</span><span class="group-count"></span></td></tr>');
}
}