列数未知的表分类器

Tablesorter with unknown # of columns

本文关键字：分类器 未知      更新时间：2023-09-26

我正在使用表分类器，并使用以下代码构建标题：

 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>']);

这很有魅力，但是，我无法提前知道需要多少列，所以我需要动态构建数组"table"。

以下是我为此想到的：

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对它们进行了比较。它们被比作"二元相同"，这意味着它们完全相同。

首先，我尝试使用单独的table.push语句，但结果大致相同。我认为可能需要将头（和表数据）作为一个组进行推送，所以我决定使用一个数组变量（tableHeaderVar）来构建HTML，然后一次将其全部推送到表中。不幸的是，我的方法似乎有些不太正确。

有人知道一些可能有用的东西吗？

编辑在工作（静态列数）或非工作（动态设置的列数）版本中，数据表似乎没有结果HTML。这是该表的HTML占位符（两者相同）：

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

正如你所看到的，它是空的。这是我的表分类器声明：

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

当然，但这可能不是您想要的答案。

已经有了整理表格的工具，所以如果你厌倦了自己制作表格。

这里有一个例子。

我相信我已经找到了答案。主要问题是，当使用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>标记将每个数据行括起来。当使用数组作为数据源时，似乎不需要这些标记，但当使用字符串值时，它们是至关重要的。

相关文章：