Question

我正在使用一个小部件（我在网上得到它）来调整表格列的大小。如果表头<thead>具有相同列数的行但如果colspan属性设置为行的单元格则不起作用，则其工作正常。假设表中有两行有六列。第一个单元格将包含colspan=6，第二个单元格将包含所有列。在这种情况下，调整大小应适用于第二行。但它不起作用。

有人可以告诉我原因吗？

这是我的代码：

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

如果您不使用colspan属性，则上面的插件很棒。

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

上面的代码行来自您提到的插件，负责捕获表中包含相同列索引的所有元素及其上方的元素。

为了更好地了解这种情况，请在脚本的任何位置添加以下行。

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

这将填充一个表，其中包含每个单元格的列索引：

enter image description here

其他优秀的jQuery插件（如上面提到的DataTables（我真正喜欢的））也没有为colspan场景提供答案。

修改也许我给你的想法是，这是不可能的。我想补充一点，您可以通过让它知道有多个单元格跨越多个列来修补此插件。尽管如此，你还是要考虑几个边缘情况。

如果表头具有多行并且colspan到表单元格，则表列调整大小不起作用

1 个答案: