Il ridimensionamento della colonna della tabella non funziona se l'intestazione della tabella ha più righe e colspan nella cella della tabella

Question

Sto usando un widget (l'ho preso nel web) per ridimensionare le colonne della tabella. Funziona correttamente se l'intestazione della tabella <thead> ha righe con lo stesso numero di colonne ma non funziona se l'attributo colspan è impostato su cella di una riga. Diciamo che ci sono due righe nella tabella con sei colonne. La prima cella avrà colspan=6 e la seconda avrà tutte le colonne. In questo caso il ridimensionamento dovrebbe funzionare per la seconda riga. Ma non sta funzionando.

Qualcuno può farmi sapere il motivo?

Ecco il mio codice:

<!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

Il plugin di cui sopra è grande se non si utilizza l'attributo colspan.

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

Le righe di codice di cui sopra sono da plug-in che hai citato e sono incaricati di catturare tutti gli elementi che condividono lo stesso indice di colonna della tabella con l'elemento sopra di loro.

Per comprendere meglio la situazione, aggiungere le seguenti righe in qualsiasi punto dello script.

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

Ciò popolare una tabella con la colonna indice di ciascuna delle sue cellule:

Nemmeno altri grandi plugin jQuery come le DataTable di cui sopra (che io veramente amo) hanno risposte per scenari di colspan.

EDIT Forse ti stavo dando l'idea che non è possibile. Vorrei aggiungere che è possibile correggere questo plug-in facendo sapere che ci sono celle che si estendono su più di una colonna. Detto questo, però, dovrai prendere in considerazione diversi casi limite.