同步表调整大小

Question

我正在使用 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 解决方案。

Answer 1

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

到目前为止，我已经能够做到这一点，但是这种“hacky”方式似乎并不那么好。

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

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。希望它能帮助您或其他人不断改进它。