Question

我正在使用tablesorter并使用以下代码构建标头：

 table.push(['<div class="first"></div>', '<div class="model">Model</div>', 
             '<div class="third" style="width: ' + ColumnWidth[3] + 'px;">' + ColumnNo[3] + '</div>',
            '<div class="fourth" style="width: ' + ColumnWidth[4] + 'px;">' + ColumnNo[4] + ColumnUnit[4] + '</div>', 
            '<div class="fifth" style="width: ' + ColumnWidth[5] + 'px;">' + ColumnNo[5] + ColumnUnit[5] + '</div>',
            '<div class="sixth" style="width: ' + ColumnWidth[6] + 'px;">' + ColumnNo[6] + ColumnUnit[6] + '</div>', 
            '<div class="seventh" style="width: ' + ColumnWidth[7] + 'px;">' + ColumnNo[7] + ColumnUnit[7] + '</div>',
            '<div class="eighth" style="width: ' + ColumnWidth[8] + 'px;">' + ColumnNo[8] + ColumnUnit[8] + '</div>', 
            '<div class="ninth" style="width: ' + ColumnWidth[9] + 'px;">' + ColumnNo[9] + ColumnUnit[9] + '</div>',
            '<div class="tenth" style="width: ' + ColumnWidth[10] + 'px;">' + ColumnNo[10] + ColumnUnit[10] + '</div>', 
            '<div class="eleventh" style="width: ' + ColumnWidth[11] + 'px;">' + ColumnNo[11] + ColumnUnit[11] + '</div>',
            '<div class="twelfth" style="width: ' + ColumnWidth[12] + 'px;">' + ColumnNo[12] + ColumnUnit[12] + '</div>', 
            '<div class="thirteenth" style="width: ' + ColumnWidth[13] + 'px;">' + ColumnNo[13] + ColumnUnit[13] + '</div>',
            '<div class="fourteenth "style="width: ' + ColumnWidth[14] + 'px;">' + ColumnNo[14] + ColumnUnit[14] + '</div>', 
            '<div class="fifteenth" style="width: ' + ColumnWidth[15] + 'px;">' + ColumnNo[15] + ColumnUnit[15] + '</div>',
            '<div class="sixteenth" style="width: ' + ColumnWidth[16] + 'px;">' + ColumnNo[16] + ColumnUnit[16] + '</div>', 
            '<div class="seventeenth" style="width: ' + ColumnWidth[17] + 'px;">' + ColumnNo[17] + ColumnUnit[17] + '</div>']);

这就像一个魅力，然而，我无法知道提前需要多少列，所以我需要建立数组＆＃39; table＆＃39;动态。

以下是我提出的建议：

var tableHeaderVar = [];

tableHeaderVar.push(['<div class="first"></div>']);
tableHeaderVar.push(['<div class="model">Model</div>']);

if (ColumnWidth[3] != 0) {
   tableHeaderVar.push(['<div class="third" style="width: ' + ColumnWidth[3] + 'px;">' + ColumnNo[3] + '</div>']);
           };

if (ColumnWidth[4] != 0) {
   tableHeaderVar.push(['<div class="fourth" style="width: ' + ColumnWidth[4] + 'px;">' + ColumnNo[4] + ColumnUnit[4] + '</div>']);
           };
.
.
.
table.push([tableHeaderVar]);

基本上，这会检查设置的宽度，如果没有选择列，它将为0。然后，检查每列的宽度，以确定该列是否包含在数组中。此代码将在表的左侧垂直构建标题，而不是在顶部。我捕获了两种方法的输出，并使用Beyond Compare来比较它们。它们被比作＆＃34; Binary Same＆＃34;，这应该意味着它们完全相同。

首先，我尝试使用单独的table.push语句，但结果大致相同。我想也许标题（和表数据）需要作为一个组推送，所以我决定使用一个数组变量（tableHeaderVar）来构建HTML，然后立即将它全部推送到表。不幸的是，我的方法似乎不太对。

有人会碰巧知道可能有用的东西吗？

修改在工作（静态列数）或非工作（动态设置的列数）版本中，数据表似乎没有生成HTML。这是表的HTML占位符（两者都相同）：

<div id="data-grid" class="datagrid">
<div id="testtable"></div>
</div>

如你所见，它是空的。这是我的tablesorter声明：

$('#testtable').tablesorter({
  theme: 'default',
  widthFixed: false,
  widgets: ['stickyHeaders'],
  widgetOptions: {
  build_source: table,
    build_headers: {
    rows: 1,
    classes: [],
    text: []
    },
    build_footers: {
      rows: 0
    }
  }
});

Answer 1

当然可能不是您正在寻找的答案。

现在已经有了用于分类表的工具，所以如果你厌倦了制作自己的工具。

Here就是一个例子。

Answer 2

我相信我找到了答案。主要问题是，当使用tablesorter构建表小部件时，传递一个数组（在这种情况下用于一次一个地添加所需的列）到另一个数组（用作构建表小部件的数据源）根本不起作用正确。在比较了两个数组的结果之后，我没有发现任何差异，但是有一些东西将其抛弃了。此外，数据源数组不能一次构建一个值。至少，我没有运气。

以下是我必须做的事情：

var tableHeaderVar = [];

tableHeaderVar.push(['<th><div class="first"></div></th>']);
tableHeaderVar.push(['<th><div class="model">Model</div></th>']);

if (ColumnNo[3] != null) {
  tableHeaderVar.push(['<th><div class="third" style="width: ' + ColumnWidth[3] + 'px;">' + ColumnNo[3] + '</div></th>']);
};

if (ColumnNo[4] != null) {
  tableHeaderVar.push(['<th><div class="fourth" style="width: ' + ColumnWidth[4] + 'px;">' + ColumnNo[4] + ColumnUnit[4] + '</div></th>']);
};
.
.
.
table = '<thead>' + tableHeaderVar + '</thead>';

因此，正如您所看到的，我动态构建了一个数组，以包含使用<th>标记所需的每个列。然后，在选择所有列之后，我将该数组传递给字符串变量并用thead标记将其括起来。

除了使用<td>标签外，我做了一些与表体非常相似的东西。当我遍历每个数据行时，我用<tr>标记括起来。当使用数组作为数据源时，似乎不需要这些标记，但是当使用字符串值时，它们是至关重要的。

具有未知＃列的Tablesorter

2 个答案: