Bir Önyükleme tablosunu üst kapsayıcısından daha geniş boyutlandırmak için nasıl zorlayabilirim?

Question

Bir Önyükleme tablosu kullanarak elektronik tablo benzeri bir uygulama oluşturuyorum. Bir kullanıcı sütun görünürlüğünü değiştirebilir, sütun ekleyebilir/silebilir, yeniden boyutlandırabilir vb.

Kullanıcı bir sütunu yeniden boyutlandırmayı seçtiğinde yatay olarak kaydırmak için tabloya ihtiyacım var. masayı ana kabın içine yerleştirin. Temel bir Bootstrap tablosu:

<div class="wrapper"> 
<table id="grid" class="table"> 
    <thead> 
    <tr> 
     <th>One</th> 
     <th>Two</th> 
     <th>Three</th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
    </tr> 
    </tbody> 
</table> 
</div> 

Ve kodu (SO üzerinde user686605 kredi) yeniden boyutlandırmak için: Bu keman içinde

$(function() { 
var pressed = false; 
var start = undefined; 
var startX, startWidth; 

$("#grid").on('mousedown', 'th', function(e) { 
    start = $(this); 
    pressed = true; 
    startX = e.pageX; 
    startWidth = $(start).width(); 
    $(start).addClass("resizing"); 
    }); 

    $(document).mousemove(function(e) { 
    if (pressed) { 
     $(start).width(startWidth+(e.pageX-startX)); 
    } 
    }); 

    $(document).mouseup(function(e) { 
    if (pressed) { 
     pressed = false; 
    } 
    }); 
}); 

Demo: boyutlandırma Açık https://jsfiddle.net/xc0v6gkk/1/

, tabloyu görebilirsiniz Yeniden boyutlandırılmayan üstbilgiler, yeniden boyutlandırılan sütunun artan genişliğine sığacak şekilde küçülüyor. Bu sütunları aynı genişlikte kalmaya zorlayabileceğim ve masayı ebeveyninden daha geniş bir şekilde büyütmeye zorlayabilmem için bir yöntem var mı?

yeterince sütunlar ekleyebilir

, masa kendi üst sınırlarını aşacaktır, ancak yeniden boyutlandırma artık mümkün değildir.

Ben boyutlandırma üzerinde genişlikleri kontrol ve tablo belli bir genişliğe ulaştığında div artırmak için çalıştık, ama yine div genişliği arttıkça daha da yatay sütun sürükleyerek tutmak mümkün değildir:

$(document).mousemove(function(e) { 
    if (pressed) { 
    $(start).width(startWidth + (e.pageX - startX)); 

    var docWidth = $('.wrapper').width(), 
     gridWidth = $('#grid').width(); 

    if (docWidth - gridWidth == 15) { 
     $('.wrapper').width(docWidth + 100); 
    } 
    } 
}); 

DÜZENLEME

Ben masa taşmaya başladığında yeniden boyutlandırma çalışma durur bana neden bilmek için önemli olduğunu düşünüyorum. Yeniden boyutlandırma işlemi biraz çekicidir, ancak ayarlanabilen bir şeydir. Tablo taşırken yeniden boyutlandırmanın neden durduğunu anlamıyorum.

Answer 1

Eğer istenen genişliğe yeni bir sütun eklenir her zaman yeniden boyutlandırmak için tabloya zorlayabilir. sütun genişliğini ek sütun sayısını artırabilir ve bunu başlangıç ​​genişliğine ekleyebilirsiniz.

var newCols = 0, 
    width = 160, 
    tableWidth = 400; 

$('#add-col').on('click', function(e) { 
    newCols++ 
    $('#grid').width(tableWidth + (width * newCols)); 
    $('thead tr').append('<th>Another</th>'); 
    $('tbody tr').append('<td>More</td>'); 
}); 

https://jsfiddle.net/xc0v6gkk/13/

Sen bu yer almak için ayarları ile oynamak gerekir.