复杂的表合并的JavaScript和放大器; jQuery的算法 [英] Complex table merging javascript & jquery algorithm

问题描述

我有我有麻烦解决一个比较特殊的问题。我有一个2×3表中，设置如下所示。

I have a rather unique problem that I'm having trouble solving. I have a 2 x 3 table, arranged like shown below.

＆NBSP;＆NBSP;＆NBSP;＆NBSP; _ 1 __ _ _ 2 的__
1 | _ __ _ 的 | __ _ _ |
2 - | _ __ _ 的 | __ _ _ |
3 | _ __ _ 的 | __ _ _ |

    _1____2__
1-|____|____|
2-|____|____|
3-|____|____|

的数据被填充到表的单元格。有时，在一列或行中的数据可以是相同的。例如，如果（1,1）和（1,2）具有相同的数据。在某些情况下，（1,1），（1,2），和（1,3）都可以有相同的数据。如果在细胞中的值是相同的，而相邻的，它们需要被合并。例如，如果（1,1）和（1,2）都具有100的值，则两个单元得到合并。我已经通过使用jQuery喜欢手动完成的：

Data is populated into the cells of the table. Sometimes, the data in a column or row can be the same. For example, if (1,1) and (1,2) have the same data. In some cases (1,1), (1,2), and (1,3) can all have the same data. If the values in the cells are the same, and adjacent, they need to be merged. For example, if (1,1) and (1,2) both have a value of "100", the two cells get merged. I've done this manually by using jquery like:

(1,2).hide();
(1,1).attr("rowspan", "2");

余隐藏（1,2）细胞，而不是删除，因为这些表可被复位到原来的2×3，然后如果需要的话重新填充。手动，这个伟大的工程，但我需要一个动态的方法。下面是什么需要完成的总体目标。

I hide the (1,2) cell instead of delete, since the tables can be reset to the original 2x3 and then repopulated if needed. Manually, this works great, but I need a dynamic method. Below is the overall goal of what needs to be accomplished.

• 如果两个垂直相邻的细胞或三个垂直相邻的单元在各自的列具有一个值是相等的，然后将这些细胞被合并在一起。
• 行细胞，如（1,1）和（2,1）可以有复制数据，并且从不合并。
• 作为参考，这是兼容要合并的单元组是{（1,1），（1,2）}，{（1,1），（1,2），（1,3）} ，{（1,2），（1,3）}，{（2,1），（2,2）}，{（2,1），（2,2），（2,3）}，{ （2,2），（2,3）}
• 在多个合并可以在同一时间发生。例如：{（1,1），（1,2）}具有相同的数据，和{（2,1），（2,2），（2,3）}具有相同的数据。两组分别合并。

我的主要问题是，我将如何去写一个算法来做到这一点，而无需编写了每一种可能的情况。可有人告诉我的东西，将工作的例子吗？我意识到这是复杂的，可以随意要求澄清的问题。在先进的感谢这么多。这是一个巨大的帮助！

My main question is, how would I go about writing an algorithm to do this, without writing out every possible situation. Can someone show me an example of something that would work? I realize this is complex, so feel free to ask questions for clarification. Thanks so much in advanced. This is a huge help!

推荐答案

这样？ http://jsfiddle.net/4zGvg/ 工程与任意行/ COLS。

Like this? http://jsfiddle.net/4zGvg/ Works with arbitrary rows/cols.

我们的想法：我们有值矩阵和范围矩阵。对跨度值是

The idea: we have values matrix and span matrix. The values of span are

0 =隐藏该单元

1 =正常细胞

X> 1 =细胞与ROWSPAN X

x > 1 = cell with rowspan x

迭代通过直接命令列，并以相反的顺序行。如果某些单元格的值等于低于它的价值，增加该小区的范围和删除范围下面的单元格

Iterate by columns in direct order and by rows in reverse order. If some cell's value is equal to the value below it, increase this cell's span and delete the span of the below cell:

for (var col = 0; col < cols; col++) {
    for (var row = rows - 2; row >= 0; row--) {
        if (values[row][col] == values[row + 1][col]) {
            span[row][col] = span[row + 1][col] + 1;
            span[row + 1][col] = 0;
        }
    }
}

一旦做到这一点，你可以使用范围生成完整的表或显示/隐藏单元格并设置其属性ROWSPAN

Once this is done, you can use span to generate the complete table or to show/hide cells and set their rowspan attributes.

这篇关于复杂的表合并的JavaScript和放大器; jQuery的算法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！