在隐藏表行时处理具有rowspan的单元格

Question

我有一个包含rowspan属性的单元格的表,我想:

1. 每当tr隐藏a时,表格将自动重新排列
2. 每当tr再次显示a时,它将恢复到原始状态

因此,如果你有这样的表,点击X不应该破坏布局.并单击一个come back按钮,应该恢复原始布局.

(尝试从下到上删除所有行,而不是从右到左恢复它们,这是一个理想的流程)

我有一些半解决方案,但似乎都太复杂了,我确信有一个很好的方法来处理这个问题.

Answer 1

好吧,我真的花了很长时间来讨论这个问题,所以这里......

对于那些只想查看工作解决方案的人,请单击此处

更新:我已经改变了视觉列计算方法来遍历表并创建一个2维数组,看看哪些使用jQuery的老方法offset()方法,请点击这里.代码更短,但时间更长.

问题的存在是因为当我们隐藏一行时,虽然我们希望隐藏所有单元格,但我们希望伪单元格 - 即由于单元格rowspan属性而出现在以下行中的单元格- 保持不变.为了解决这个问题,每当我们遇到带有a的隐藏单元格时rowspan,我们会尝试将其向下移动到下一个可见行(随着时间的推移递减它的rowspan值).无论使用哪种我们原来的细胞或它的克隆,我们接着往下遍历表再次为将含有伪小区每一行,如果该行被隐藏我们的递减rowspan一次.(要了解原因,请查看工作示例,并注意隐藏蓝色行时,红色单元格9的行数必须从2减少到1,否则它会将绿色9向右推).

考虑到这一点,我们必须在显示/隐藏行时应用以下函数:

function calculate_rowspans() {
  // Remove all temporary cells
  $(".tmp").remove();

  // We don't care about the last row
  // If it's hidden, it's cells can't go anywhere else
  $("tr").not(":last").each(function() {
    var $tr = $(this);

    // Iterate over all non-tmp cells with a rowspan    
    $("td[rowspan]:not(.tmp)", $tr).each(function() {
      $td = $(this);
      var $rows_down = $tr;
      var new_rowspan = 1;

      // If the cell is visible then we don't need to create a copy
      if($td.is(":visible")) {
        // Traverse down the table given the rowspan
        for(var i = 0; i < $td.data("rowspan") - 1; i ++) {

          $rows_down = $rows_down.next();
          // If our cell's row is visible then it can have a rowspan
          if($rows_down.is(":visible")) {
            new_rowspan ++;
          }
        }
        // Set our rowspan value
        $td.attr("rowspan", new_rowspan);   
      }
      else {
        // We'll normally create a copy, unless all of the rows
        // that the cell would cover are hidden
        var $copy = false;
        // Iterate down over all rows the cell would normally cover
        for(var i = 0; i < $td.data("rowspan") - 1; i ++) {
          $rows_down = $rows_down.next();
          // We only consider visible rows
          if($rows_down.is(":visible")) {
            // If first visible row, create a copy

            if(!$copy) {
              $copy = $td.clone(true).addClass("tmp");
              // You could do this 1000 better ways, using classes e.g
              $copy.css({
                "background-color": $td.parent().css("background-color")
              });
              // Insert the copy where the original would normally be
              // by positioning it relative to it's columns data value 
              var $before = $("td", $rows_down).filter(function() {
                return $(this).data("column") > $copy.data("column");
              });
              if($before.length) $before.eq(0).before($copy);
              else $(".delete-cell", $rows_down).before($copy);
            }
            // For all other visible rows, increment the rowspan
            else new_rowspan ++;
          }
        }
        // If we made a copy then set the rowspan value
        if(copy) copy.attr("rowspan", new_rowspan);
      }
    });
  });
}

问题的下一个非常困难的部分是计算将哪些单元格的副本放在行中的索引.请注意,在示例中,蓝色单元格2 在其行0中具有实际索引,即它是行中的第一个实际单元格,但是我们可以看到它在视觉上位于第2列(0索引).

加载文档后,我只采用了计算一次的方法.然后我将这个值存储为单元格的数据属性,这样我就可以将它的副本放在正确的位置(我在这个上面有很多Eureka时刻,并且制作了很多页面的注释!).为了进行这个计算,我最终构建了一个二维数组matrix,它跟踪所有使用过的可视列.同时,我存储单元格原始rowspan值,因为这将随着隐藏/显示行而改变:

function get_cell_data() {
    var matrix = [];  
    $("tr").each(function(i) {
        var $cells_in_row = $("td", this);
        // If doesn't exist, create array for row
        if(!matrix[i]) matrix[i] = [];
        $cells_in_row.each(function(j) {
            // CALCULATE VISUAL COLUMN
            // Store progress in matrix
            var column = next_column(matrix[i]);
            // Store it in data to use later
            $(this).data("column", column);
            // Consume this space
            matrix[i][column] = "x";
            // If the cell has a rowspan, consume space across
            // Other rows by iterating down
            if($(this).attr("rowspan")) {
                // Store rowspan in data, so it's not lost
                var rowspan = parseInt($(this).attr("rowspan"));
                $(this).data("rowspan", rowspan);
                for(var x = 1; x < rowspan; x++) {
                    // If this row doesn't yet exist, create it
                    if(!matrix[i+x]) matrix[i+x] = [];
                    matrix[i+x][column] = "x";
                }
            }
        });
    });

    // Calculate the next empty column in our array
    // Note that our array will be sparse at times, and
    // so we need to fill the first empty index or push to end
    function next_column(ar) {
        for(var next = 0; next < ar.length; next ++) {
            if(!ar[next]) return next;
        }
        return next;
    }
}

然后在页面加载上简单地应用它:

$(document).ready(function() {
    get_cell_data();
});

(注意:虽然这里的代码比我的jQuery .offset()替代品更长,但计算速度可能更快.如果我错了,请纠正我).