Tablo kolonu yeniden boyutlandırma, tablo üstbilgisi birden çok satıra sahipse ve tablo hücresine yazılırsa çalışmaz

Question

Tablo sütunlarını yeniden boyutlandırmak için bir pencere öğesi (Web'de var) kullanıyorum. Tablo başlığı <thead>, eşit sayıda sütun içeren satırlar içeriyorsa ancak colspan özniteliği bir satırın hücresine ayarlanmışsa, düzgün çalışmıyor. Diyelim ki altı sütunlu tabloda iki satır var. İlk hücre colspan=6'a sahip olacak ve ikincisi tüm sütunlara sahip olacak. Bu durumda, yeniden boyutlandırma ikinci satır için çalışmalıdır. Ama işe yaramıyor.

Birisi bana nedenini bildirir mi? Eğer colspan özelliğini kullanmak istemiyorsanız yukarıdaki

<!DOCTYPE> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
    <style> 

table{ 
    table-layout: fixed; 
    border-collapse: collapse; 
    border: 1px solid black; 
} 
tr.last td { 
    border-bottom: 1px solid black; 
} 

td{ 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    position: relative; 
    white-space:nowrap; 
    padding: 2px 5px; 
    text-align: left; 
    overflow:hidden; 
} 

td.last { 
    border-right: none; 
} 

thead td div:first-child{ 
    text-overflow:ellipsis; 
    overflow:hidden; 
} 
tbody td div:first-child{ 
    overflow:hidden; 
} 

.scrollContainer { 
    overflow:auto; 
    width:700px; 
    height:auto; 
    display:inline-block; 
    border:1px solid red; 
} 
.sort1,.sort2{ 
height:20px; 
border:1px solid red; 
position:absolute; 
top:0px; 
} 
.sort1{ 
background:url('popup_trg_indicator.gif') 50% 50% no-repeat; 
width:10px; 
right:0px; 
} 

.sort2{ 
    background:url('sort_asc.gif') 50% 50% no-repeat; 
    width:12px; 
    right:10px; 
} 
.resizeHelper,.ui-resizable-e { 
    cursor: e-resize; 
    width: 10px; 
    height: 100%; 
    top: 0; 
    right: -8px; 
    position: absolute; 
    z-index: 100; 
    background:black; 
} 

</style> 
<div class="scrollContainer"> 
    <table id="MyTable" width="100%"> 
     <thead> 

      <tr> 
       <td style="width:200px;" colspan="6"> 
        <span >Column 1</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <!-- 
       <td style="width:200px;"> 
        <span >Column 2</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 

       <td style="width:300px;"> 
        <span >Column 3</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 

       <td style="width:150px;"> 
        <span >Column 4</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td style="width:200px;"> 
        <span >Column 5</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td class="last" style="width:100px;"> 
        <span >Column 6</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>     
       </td> 
       --> 
      </tr> 

      <!-- Second Row --> 
       <tr> 
       <td style="width:200px;"> 
        <span >Column 1.1</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td style="width:200px;"> 
        <span >Column 2.2</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td style="width:300px;"> 
        <span >Column 3.3</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 

       <td style="width:150px;"> 
        <span >Column 4.4</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td style="width:200px;"> 
        <span >Column 5.5</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td class="last" style="width:100px;"> 
        <span >Column 6.</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>     
       </td> 
      </tr> 

     </thead> 
     <tbody> 
      <tr><td><div>Column 1</div></td><td><div>Column 2</div></td> 
       <td><div>Column 3</div></td><td><div>Column 4</div></td> 
       <td><div>Column 5</div></td><td><div>Column 6</div></td> 
      </tr> 

      <tr class="last"> 
       <td><div>Column 1</div></td><td><div>Column 2</div></td> 
       <td><div>Column 3</div></td><td><div>Column 4</div></td> 
       <td><div>Column 5</div></td><td><div>Column 6</div></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<div>Rama Rao</div> 

<script> 
/** 
* Plug-in 
* Enables resizable data table columns. 
**/ 
(function($) { 
    $.widget("ih.resizableColumns", { 
     _create: function() { 
      this._initResizable(); 
     }, 

     _initResizable: function() { 

      var colElement, colWidth, originalSize,colIndex; 
      var table = this.element; 

      this.element.find("thead td").resizable({ 
       handles: {"e": ".resizeHelper"}, 
       minWidth: -10, // default min width in case there is no label 
       // set correct COL element and original size 
       start:function(event, ui) { 
        colIndex = ui.helper.index() + 1; 
        colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")"); 
        colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width 
        originalSize = ui.size.width; 
       },     

       // set COL width 
       resize: function(event, ui) { 
        var resizeDelta = ui.size.width - originalSize;      
        var newColWidth = colWidth + resizeDelta; 
        colElement.width(newColWidth); 

        // height must be set in order to prevent IE9 to set wrong height 
        $(this).css("height", "auto"); 
       } 
      }); 
     } 

    }); 
})(jQuery); 
</script> 

<script> 
$('#MyTable').resizableColumns(); 
</script> 

Answer 1

eklenti harika:

İşte benim kodudur.

colIndex = ui.helper.index() + 1; 
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")"); 

Yukarıdaki kod satırları sizi söz ettik eklenti ve üstlerindeki eleman ile tablodaki aynı sütun indeksi paylaşan tüm öğelerin yakalanması sorumlu bulunmaktadır.

Durumu daha iyi anlamak için, komut satırında aşağıdaki satırları ekleyin. var

Ne (gerçekten seviyorum) Yukarıda belirtilen DataTable gibi diğer büyük jQuery eklentileri yapın:

$(document).ready(function() { 
    $("#MyTable tr td").each(function() { 
     $(this).html($(this).index()); 
    }); 
}); 

Bu, hücrelerin her birinin kolon-endeksine sahip bir tablo dolduracaktır colspan senaryoları için cevaplar.

EDIT Belki de size bunun mümkün olmadığına dair fikir veriyordum. Bu eklentiyi, birden fazla sütunun üzerinde yayılmış hücrelere sahip olduğunu bildirerek ekleyebileceğinizi eklemek isterim. Yine de söyledikten sonra, birkaç kenar vakasını hesaba katmanız gerekecek.