同步表大小调整

Synchronize Table Re-sizing

本文关键字：调整 同步      更新时间：2023-09-26

我使用JQuery插件colResizable (@alvaro-prieto)在我的应用程序中创建可调整大小的表，并有两个单独的表对象(相同的列数)。然而，我正在寻找一种方法来调整两个表的大小在同一时间(例如更新表1的列也更新表2的列同步)。请参阅下面的JSFiddle查看插件的交互式实现。

$("#sample").colResizable({liveDrag:true});
$("#sample2").colResizable({
    liveDrag:true,
    gripInnerHtml:"<div class='grip'></div>", 
    draggingClass:"dragging" });

我注意到你可以指定一个回调函数，如onDrag，在"拖拽"列时始终触发。虽然这有助于我更接近一个解决方案，我仍然不知道一个具体的方法来同步表的更新。

我希望避免修改源代码，如果可能的话，找到一个合适的JS/JQ解决方案。

不幸的是，插件似乎没有办法以编程方式调整列的大小。现在，您可以使用onDrag事件来模拟另一个表的列的大小调整。

到目前为止，我已经能够做到这一点，但这种"黑客"的方式似乎并不那么有效。

这是我每次拖动列时调用的函数:

function syncTableWidth(e){
    var parent = e.currentTarget;
    $("table").filter(function(){return $(this).attr("id") != $(parent).attr("id")}).each(function(){
        //Match the width
        $("tr th", this).each(function(index){
            $(this).css("width",$("tr th:nth-of-type("+(index+1)+")", parent).css("width"))
        });
        //Match the grip's position
        $(this).prev().find(".JCLRgrip").each(function(index){
            $(this).css("left",$(parent).prev().find(".JCLRgrip:nth-of-type("+(index+1)+")").css("left"));
       });
    }); 
}

现在你可以像这样调用这个函数:

$("#my_table").colResizable({
    liveDrag:true,
    gripInnerHtml:"<div class='grip'></div>", 
    draggingClass:"dragging",
    onDrag: syncTableWidth
});

这是我正在处理的JSFiddle。

相关文章：