同步表调整大小

Question

I'm using the JQuery plugin colResizable ( @alvaro-prieto ) to create re-sizable tables in my application and have two individual table objects (same column count). However, I am looking for a way to resize the two tables at the same time (eg Updating Table 1's columns also updates Table 2's columns synchronously). See the following JSFiddle for an interactive implementation of the plugin.

$("#sample").colResizable({liveDrag:true});

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

I've noticed you can specify a callback function such as onDrag that consistently fires when 'dragging' a column. While this helps me get closer to a solution, I am still unaware of a concrete method to synchronize the tables' updates.

I am looking to avoid modifying the source if possible and find a suitable JS/JQ solution.

Answer 1

Unfortunatelly the plugin doesn't seem to have a way to resize the column programatically. Now, you can use the onDrag event to simulate a resize in the other table's columns.

So far I've been able to do so, but this "hacky" way doesn't seem to work that well.

Here is the function that I call every time a column is dragged:

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"));
       });
    }); 
}

Now you can call this function like this:

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

Here is the JSFiddle I was working on. Hopefully it wil lhelp you or someone else keep improving it.