我得到一个带有详细行和总数的MySQL查询。我很想使用Tablesorter子行功能来隐藏细节行，但是面对需要将csv文件转换为html的问题（没有问题）但我的总行数位于每个详细行列表的底部，而不是上面
问题是，我能否以点击链接相关上行展开的方式使用Tablesorter子行？
我的示例表（在将其转换为html之前）是：
n_cli n_inv date_inv date_due eur +exp
----------------------------------------------------------------------------------
10289 21222321-1 2012-10-04 2012-12-30 1,031.05 1,072.29
10289 21222479-1 2012-10-09 2012-12-30 257.28 267.57
----------------------------------------------------------------------------------
Total CUSTOMER1 NAME 1,288.33 1,339.86
10416 21110039-1 2011-06-22 2011-06-22 136.28 145.28
----------------------------------------------------------------------------------
Total CUSTOMER2 NAME 136.28 145.28
顺便说一下，我可以使用具有三个细节级别的Child Rows吗？例如，“每位客户的总销售额/每张发票/每张发票的产品线总数”？
谢谢，
EDITED：这是源（样本）文件：
n_cli;n_inv;date_inv;date_due;eur;+exp
10289;21222321-1;2012-10-04;2012-12-30;1,031.05;1,072.29
10289;21222479-1;2012-10-09;2012-12-30;257.28;267.57
Total;CUSTOMER1 NAME;;;1,288.33;1,339.86
10416;21110039-1;2011-06-22;2011-06-22;136.28;145.28
Total;CUSTOMER2 NAME;;;136.28;145.28
我的html，显然无法正常工作，因为我无法：
隐藏上排（总计上方）而不是底行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/js/ts/css/theme.default.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="/js/csv/js/jquery.csvToTable.js"></script>
<script>
$(function() {
$('#tabla1').CSVToTable('dat.txt',
{
startLine: 0,
separator: ";"
}
).bind("loadComplete",function() {
$(document).find('#tabla1').tablesorter({widgets:
["zebra", "stickyHeaders"]});
});;
});
</script>
</head>
<body>
<div>
<table id="tabla1" class="tablesorter">
</div>
</table>
</body>
</html>
答案 0 :(得分：1)
因此，您可以使用CSVToTable加载完成回调函数来修改表格。
我把这个代码放在一起＆amp; demo *显示如何分配子行并使行高于可折叠的行：
$(function () {
$('table')
.CSVToTable('csv.txt', {
startLine: 0,
separator: ';'
})
.bind("loadComplete", function () {
$('table')
.find('td:contains("Total")')
.each(function () {
var $cell = $(this).prepend('<i/>'),
$totalRow = $cell.parent().addClass('totals tablesorter-childRow'),
group = $totalRow.prevUntil('.totals');
group.last().addClass('tablesorter-parentRow');
group.slice(0, -1).addClass('tablesorter-childRow');
}).end()
.tablesorter({
theme: 'blue',
widgets: ["zebra", "stickyHeaders"]
})
.find('tr.totals').click(function () {
$(this)
.toggleClass('collapsed')
.prevUntil('.totals').toggle();
});
});
});
*该演示未使用CSVToTable脚本，但添加的HTML将是相同的。
“总计”单元格中的箭头由css设置样式，因此您可以根据需要更改它们：
/* collapsed arrow */
tr.totals.collapsed td i {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #888;
border-right: 0;
margin-right: 10px;
}
tr.totals td i {
display: inline-block;
width: 0;
height: 0;
border-bottom: 4px solid transparent;
border-top: 4px solid #888;
border-right: 4px solid #888;
border-left: 4px solid transparent;
margin-right: 7px;
}
更新：因为您正在向上折叠行，所以您需要一个自定义解析器来查找最后一行而不是第一行中的自定义名称，因此它会正确排序。这是要使用的解析器和updated demo
$.tablesorter.addParser({
id: 'findname',
format: function (s, table, cell, cellIndex) {
var $cell = $(cell).parent().nextAll('tr.totals').eq(0).find('td').eq(cellIndex);
return $cell.text();
},
// set type, either numeric or text
type: 'text'
});
更新＃2：嗯，你需要另一个数字列解析器，所以它们也可以正确排序;这是一个updated demo：
$(function () {
$.tablesorter.addParser({
id: 'findname',
format: function (s, table, cell, cellIndex) {
var $cell = $(cell).parent().nextAll('tr.totals').eq(0).find('td').eq(cellIndex);
return $cell.text();
},
type: 'text'
});
$.tablesorter.addParser({
id: 'findnumber',
format: function (s, table, cell, cellIndex) {
var $cell = $(cell).parent().nextAll('tr.totals').eq(0).find('td').eq(cellIndex);
return $.tablesorter.formatFloat($cell.text(), table);
},
type: 'numeric'
});
$('table')
.CSVToTable('csv.txt', {
startLine: 0,
separator: ';'
})
.bind("loadComplete", function () {
$('table')
.find('td:contains("Total")')
.each(function () {
var $cell = $(this).prepend('<i/>'),
$totalRow = $cell.parent().addClass('totals tablesorter-childRow'),
group = $totalRow.prevUntil('.totals');
group.last().addClass('tablesorter-parentRow');
group.slice(0, -1).addClass('tablesorter-childRow');
}).end()
.tablesorter({
theme: 'blue',
headers: {
1: { sorter: 'findname' },
4: { sorter: 'findnumber' },
5: { sorter: 'findnumber' }
},
widgets: ["zebra", "stickyHeaders"]
})
.find('tr.totals').click(function () {
$(this)
.toggleClass('collapsed')
.prevUntil('.totals').toggle();
});
});
});
更新＃3
要分别设置父行和子行的样式，可以使用应用的类名tablesorter-parentRow和tablesorter-childRow，但为了避免混淆，我将tablesorter-parentRow重命名为tablesorter-firstChildRow因为在插件中它实际上是父行，但出于样式目的，最好将其命名为子行，因为我们从下到上工作。 “总计”行也应用了类名tablesorter-childRow，因此为了区分它，您可以使用totals类名称。
无论如何，这是一个更新的演示，其中包含类名称更改和css，以及添加以确保它仅针对tbody中的单元格（.find('tbody td:contains("Total")')）
/* child row styling */
.tablesorter-firstChildRow td, .tablesorter-childRow td {
color: red;
}
/* Totals row */
tr.totals td {
color: blue;
}