1

我在前端创建了一个包含几列的表。包含数据的表如下所示：

    ID         Name          Date1           Date2         Code1    
   00001        abc         2012/1/1         2012/1/10       1
   00002        def         2012/1/12        2012/2/1        1
   00002        def         2012/1/12        2012/2/1        2
   00002        def         2012/1/12        2012/2/1        3
   00003        xyz         2012/2/12        2012/3/1        2
   00003        xyz         2012/2/12        2012/3/1        4

现在我想以分组方式呈现上表中的数据，即每个唯一 ID 只有 1 行，所有代码列合并并显示为 1 行。

    ID         Name          Date1           Date2         Code1    
   00001        abc         2012/1/1         2012/1/10       1
                                                             1
   00002        def         2012/1/12        2012/2/1        2                              
                                                             3
   00003        xyz         2012/2/12        2012/3/1        2
                                                             4

请忽略我的格式样式。当我没有关于即将到来的代码值数量的信息时，这是否可以编程？提前致谢。

4

3 回答 3

0

是的，这当然是可能的。

根据表上的约束（例如，ID 是否严格增加？）可以考虑几种算法来完全满足您的要求。

但是，我强烈建议不要这样做。直接在 DOM 上使用 jQuery 执行此操作将需要大量 DOM 访问操作，并且速度相对较慢。在服务器端执行此操作会好得多，我想在此生成数据，或者在客户端以相同数据的数组/对象表示形式执行此操作。

于 2012-10-10T22:57:29.160 回答
0

此功能将删除与上方单元格内容重复的单元格内容。它不会合并它们（à la rowspan/ colspan），但会清空它们。

function emptyDittoCells(table) {
    if (!(table instanceof jQuery && table.is("table")))
        throw "bad parameter";

    table.find('tr').each(function(rowElement) {
        var row = $(rowElement);
        var previousRow = $(rowElement).prev('tr');
        if (!previousRow.length) return;

        row.each(function(cellElement, index) {
            var cell = $(cellElement);
            var previousCell = previousRow.children("td:nth-child(" + index + ")"); 

            while (previousCell.data('ditto')) {
                previousCell = previousCell.data('ditto');
            }

            if (hasSameContents(cell, previousCell)) {
                cell.empty()
                    .data('ditto', previousCell);
            }
        });
    });
}

function hasSameContents(a, b) {
    return (a.text() == b.text()); // naive but usable in the simple case
}

未经测试且有点 DOM 密集型，但我认为它会起作用。除了可能的语法错误（缺少右括号）之外，我最关心的是那个td:nth-child()选择器。这可以更健壮地写为$(previousRow.children('td').get(index)).

于 2012-10-10T23:02:26.333 回答
0

正如之前所说，这种转换最好在服务器端完成。

但是如果表不是太大，并且假设 Name、Date1 和 Date2 对于给定 ID 具有相同的值，您可以解析表（例如使用 jQuery）并从头开始重建它。

一些伪代码：

foreach (row)
{
  foreach (column)
  {
    get ID value;
    if (not yet stored) store data for that ID somewhere else;
    store Code1 value with its ID;
  }
}

foreach (ID stored)
{
  get all related values;
  rebuild table row;
}

我希望它有所帮助。如果没有，那么编写一些 jQuery 代码就不会那么困难了。

于 2012-10-10T23:13:29.867 回答