同步表调整大小

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 。 希望它会对您或其他人有所帮助。