mysql - Tablesorter：子行高于总数

Question

我得到一个带有详细行和总数的 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

顺便问一下，我可以使用具有三个细节级别的子行吗？例如，“每位客户的总销售额/每张发票的总销售额/每张发票的产品线”？

谢谢，

编辑：这是源（示例）文件：

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，它显然无法正常工作，因为我无法：

通过 loadComplete 函数 (¿?) 编辑 CSVTOTABLE 进程，以便标记要显示的行和要隐藏的行。

隐藏上面的行（在 Total 上面）而不是下面的行。

<!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>

score 1 · Accepted Answer

因此，您可以使用 CSVToTable 加载完成回调函数来根据需要修改表。

我将这段代码和演示* 放在一起，以展示如何分配子行并使总行之上的行可折叠：

$(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 是相同的。

“Total”单元格内的箭头由 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;
}

更新：因为您正在折叠行，所以您需要一个自定义解析器来在最后一行而不是第一行中查找自定义名称，因此它可以正确排序。这是要使用的解析器和更新的演示

$.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：好吧，您需要另一个解析器来处理数字列，以便它们也能正确排序；这是一个更新的演示：

$(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;
}

mysql - Tablesorter：子行高于总数

1 回答 1

Related

Reference