Ajax从行中删除单元格，重新计算将单元格移动到下一行的行

使用具有动态单元格宽度的twitter引导行/表结构和我有一个ajax脚本，它从数据库中删除记录并删除HTML。Ajax从行中删除单元格，重新计算将单元格移动到下一行的行

但是，我将如何去重新计算删除后的行？这是我无法理解逻辑过程的部分。例如：如果我从中间行删除一个单元格，它会计算删除后是否有足够的可用空间，并将该单元格移动到下一行。然后循环到下一行/ etc

理想情况下，它会非常酷，如果它与动态宽度一起工作，以便所有跨度加起来为12，如果肯定有空间，它只会将一个项目移动到下一行。

如果我删除一个大/宽的跨度，并且有空间可以从下一行替换2个小跨度。等我认为你在这里得到的想法。

<div class="row"> 
    <div class="span4">...<a href="">Delete</a></div> 
    <div class="span4">...<a href="">Delete</a></div> 
    <div class="span4">...<a href="">Delete</a></div> 
</div> 
<div class="row"> 
    <div class="span6">...<a href="">Delete</a></div> 
    <div class="span2">...<a href="">Delete</a></div> 
    <div class="span4">...<a href="">Delete</a></div> 
</div> 
<div class="row"> 
    <div class="span2">...<a href="">Delete</a></div> 
    <div class="span8">...<a href="">Delete</a></div> 
    <div class="span2">...<a href="">Delete</a></div> 
</div> 

    $('a').click(function(e){  
    e.preventDefault(); 
    var $self = $(this); 

    $.ajax({ 
     type: 'POST', 
     url: ajaxAction, 
     data: obj, 
     dataType: 'json', 
     success: function(data, status, jqXHR){ 
      if(data && data.ok){ 
       $self.parent().slideUp("slow", function(){ 
        if(delete_container.substring(0,5) == ".span"){ 

         // get parent row 
         var row = $(this).parent(); 
         if(row.hasClass("row") || row.hasClass("row-fluid")){ 
          var count = 0; 
          row.children("[class*='span']").each(function(){ 

           count = $(this).attr('class').match(/\d+/);          

          }); 

          if(count < 12){ 
           // check next line and move item up if it fits 
           // then loop over everything again on the next row 
          } 
         }        
        } 
        $(this).remove(); 
       }) 
      } 
     } 
    }); 
});

来源

2013-03-14 John Magnolia

我不想找人写这里的一切，只是给我一些关于它如何工作的观点。发现它很难得到我听到的逻辑 – 2013-03-15 07:40:51

我不知道我正确理解你，让我们检查：例如有表3列3行。您现在正在删除第一行第二列的单元格（位置[1,2]）。现在，如果单元格[2,1]（第二行第一列）的第一行中有足够的空间，现在要检查它，将它放在那里？ – Kasyx 2013-03-15 10:23:29

是的，然后它会循环到第三行，现在将有空间将2单元格移动到下一行 – 2013-03-15 10:29:59

最简单的方法：你的表的结构变化，并删除<div class="row">，再加入float: left到你的细胞。浏览器会照顾一切。 :)

但如果其不能接受的，让我们做函数调用rearrangeTable(fromRow)：

rearrangeTable(fromRow) { //from row is a number of row, where you have deleted cell. 
var $actualRow = $('div.row:eq('+fromRow+')'); 
var $nextRow = $actualRow.next(div.row); 

//getting free space in actual row 
var freeSpace = $actualRow.width(); //IMPORTANT: width() not outerWidth() 
$actualRow.find('cell_selector :)').each(function(i) { 
    freeSpace -= $(this).outerWidth(); 
}) 

var $nextCell; 
while($nextCell = getFirstCell($nextRow)) { //ill not show this function its trivial, just returns first cell or false if there are no more cells 
    var cellWidth = $nextCell.outerWidth(); 
    if(freeSpace >= cellWidth) { 
     letsMoveThisCell($nextCell, $actualRow); 
     freeSpace -= cellWidth; 
    } else { 
     break; //no more space, we can end there 
    } 
}

它只是元代码，没有测试，表现出一个想法，你如何archieve它。现在，您应该从已删除单元格的行调用rearrangeTable(fromRow)到表的末尾，它应该可以工作。

来源

2013-03-15 10:59:01 Kasyx

Ajax从行中删除单元格，重新计算将单元格移动到下一行的行

回答

相关问题