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事件来模拟其他表格列中的调整大小。

到目前为止，我已经能够这样做了，但是这个＆＃34; hacky＆＃34;方式似乎没有那么好。

以下是每次拖动列时调用的函数：

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

同步表重新调整大小

1 个答案: