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從行中刪除單元格，重新計算將單元格移動到下一行的行

回答

相關問題