Question

我有一个标准表，可以选择隐藏列，我想使用插件来重新调整列的宽度。

我尝试使用 colResizable 和 resizableColumns 但是当我隐藏列然后尝试时，事情会变得混乱大小调整。

编辑： 我的表格：

<table id="mytable">
<thead>
    <tr><th class="column1"></th>text 1 <th class="column2">text 2</th></tr>
</thead>
<tbody>
    <tr><td class="column1"> cell00 </td> <td class="column2"> cell01 </td></tr>
    <tr><td class="column1"> cell10 </td> <td class="column2"> cell11 </td></tr>
    <tr><td class="column1"> cell20 </td> <td class="column2"> cell21 </td></tr>
</tbody>
</table>

激活 colResizable ：

$("#mytable").colResizable({
    liveDrag:false, 
    gripInnerHtml:"<div class='grip'></div>", 
    draggingClass:"dragging",
    minWidth:50         
});

隐藏/显示列的功能：

function toggleColumn(index){
    if(something){
        $('.column'+index).hide();
    }else{
        $('.column'+index).show();
    }
$("#"+tableID).colResizable({
    disable:true
});                                             
$("#"+tableID).colResizable({
    disable:false,
    liveDrag:false, 
    gripInnerHtml:"<div class='grip'></div>", 
    draggingClass:"dragging",
    minWidth:50         
});
}

每次切换后，我重新启动 colResizable ，这样就可以获得新值。

当我重新调整隐藏的列之外的任何列时，问题就出现了。

我还需要为每列设置默认宽度的选项。欢迎所有建议。

Answer 1

colResizable 1.5与隐藏列兼容。您可以在http://www.bacubacu.com/colresizable

下载

如果您想在激活colResizable后更改列可见性，那么这些是您必须遵循的步骤：

调用colResizable（照例）
在执行任何DOM修改（例如隐藏列）之前，使用disable：true
更改列可见性
再次调用colResizable

Answer 2

看起来Datatables有你想要的一切。

查看此fiddle。你得到了所有东西：显示，隐藏列，调整大小的列，以及更多很酷的选项。使用它非常容易

$(document).ready( function () {
    $('#example').dataTable( {
        "option": value;
    } );
} );

Answer 3

选项1：

在TD上使用班级名称。在动态添加到文档的样式元素中提供类名。要调整大小，请从文档中删除样式元素，然后再添加新的细节。

选项2：

循环遍历.cells [0]，。cells [1]，....的表设置style.width的rows集合。要隐藏，请将style.display设置为none，然后取消隐藏，内联。

调整表格列的大小，可以隐藏

3 个答案: