1

動的なセル幅を持つtwitterブートストラップ行/テーブル構造を使用して、データベースからレコードを削除し、HTMLを削除するajaxスクリプトがあります。

しかし、削除後に行を再計算するにはどうすればよいですか？これは、ロジックプロセスについて頭を悩ませることができない部分です。

例：中央の行からセルを削除すると、削除後に十分なスペースがあるかどうかが計算され、セルが次の行に移動します。次に、次の行などにループします

理想的には、動的な幅で機能する場合は本当にクールであり、すべてのスパンが合計で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(); 
                })
            }   
        }
    });
});
4

1 に答える 1

0

最も簡単な方法：テーブルの構造を変更し、削除してからセル<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
    }
}

テストされていない単なるメタコードであり、どのようにアーカイブできるかを示しています。rearrangeTable( fromRow )ここで、セルが削除された行からテーブルの最後まで呼び出す必要があり、それが機能するはずです。

于 2013-03-15T10:59:01.113 に答える