jQueryUI resizable - при изменении ширины столбца - все остальные динамики дергаются

Я использую jQueryUI resizable для изменения размера столбцов в таблице. При изменении ширины одного столбца остальные столбцы должны оставаться неизменными. Должна изменяться только ширина таблицы

Почему вы меняете ширину одних столбцов, а другие дергаются? Если все столбцы сделать минимальной ширины, а затем начать увеличивать ширину последнего столбца (правого столбца), то все остальные начинают дергаться.

<div class="table-wrapper">
    <table id="table">
    <tbody>
        <tr>
            <td class="gray">Zagreb</td>
            <td class="gray">Kinshasa</td>
            <td class="gray">Kishinev</td>
            <td class="gray">Krakow</td>
            <td class="gray">Lima</td>
            <td class="gray">Lisbon</td>
        </tr>
        <tr>
            <td>Zagreb</td>
            <td>Kinshasa</td>
            <td>Kishinev</td>
            <td>Krakow</td>
            <td>Lima</td>
            <td>Lisbon</td>
        </tr>
        <tr>
            <td>Zagreb</td>
            <td>Kinshasa</td>
            <td>Kishinev</td>
            <td>Krakow</td>
            <td>Lima</td>
            <td>Lisbon</td>
        </tr>
        <tr>
            <td>Zagreb</td>
            <td>Kinshasa</td>
            <td>Kishinev</td>
            <td>Krakow</td>
            <td>Lima</td>
            <td>Lisbon</td>
        </tr>
        <tr>
            <td>London</td>
            <td>Los Angeles</td>
            <td>Luxembourg</td>
            <td>Madrid</td>
            <td>Manila</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Milan</td>
            <td>Montreal</td>
            <td>Mumbai</td>
            <td>Nairobi</td>
            <td>Nicosia</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Osaka</td>
            <td>Oslo</td>
            <td>Ottawa</td>
            <td>Paris</td>
            <td>Prague</td>
            <td>Riga</td>
        </tr>
        <tr>
            <td>Rome</td>
            <td>Rotterdam</td>
            <td>Salvador</td>
            <td>Samarkand</td>
            <td>Sydney</td>
            <td>Singapore</td>
        </tr>
        <tr>
            <td>Sofia</td>
            <td>Istanbul</td>
            <td>Taipei</td>
            <td>Tbilisi</td>
            <td>Zurich</td>
            <td>Chicago</td>
        </tr>
    </tbody>
    </table>
</div>

JS-код:

$(document).ready(function(e)
{
var $table = $("#table");
var startW = 0;
var startW_neighbor = 0;
var td_index_neighbor = 0;
var ui_minColWidth = 0;

$table.find("tr:first th, tr:first td").resizable(
    {
        handles: 'e',
        minWidth: 30,
        start : function(event,ui)
        {
            ui_minColWidth = $(this).resizable( "option", "minWidth");
            startW = $(this).width();
            startW_neighbor = ui.element.parents('.table-wrapper').find('table#table').width();
        },
        stop: function (event, ui)
        {

        },
        resize: function (event, ui)
        {
            var td_width = ui.element.width();
            var table = ui.element.parents('.table-wrapper').find('table#table');
            var d = Number(td_width) - Number(ui.originalSize.width);

            td_width = Number(startW_neighbor) + Number(d) - 2;
            table.width(td_width);
        }
    });
});

Например: http://jsfiddle.net/djmartini/08p3Lqcm/


jquery-ui resizable jquery-ui-resizable tablecolumn
person djmartini    schedule 28.06.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В то же время вы вмешиваетесь в нормальное поведение resizable и полагаетесь на него для вычисления некоторых значений, поэтому в какой-то момент он ломается. В этом случае вы вычисляете разницу width на основе поведения с изменяемым размером и применяете ее для изменения поведения. Но когда у resizable больше нет места для изменения размера, разница равна 0, поэтому больше ничего не перемещается. Если вы хотите изменить поведение resizable, вы можете работать с положением мыши и микроуправлять изменениями в width. В этом случае вам нужно будет обрабатывать случаи, когда ваша мышь перемещается, но ничего не изменяется. Это происходит, когда столбцы больше не могут уменьшать размер. Кажется, что-то вроде этого работает:

  $table.find("tr:first th, tr:first td").resizable({
        handles: 'e',
        minWidth: 30,
        start: function (event, ui) {
            ui_minColWidth = $(this).resizable("option", "minWidth");
            startW = $(this).width();
            td_width = startW;//this to check if width can change
            startW_neighbor = ui.element.parents('.table-wrapper').find('table#table').width();
            startMouseX = event.pageX;//to calculate mouse diffrence
        },
        stop: function (event, ui) {

        },
        resize: function (event, ui) {;
            var mouseDiff = event.pageX - startMouseX;//mouse mouvement
            //If the mouse is negative, it can resize only if column 
            //isn't at min width. When mouse positive resize always.
            if (ui.element.width() != td_width || mouseDiff > 0) {
                td_width = ui.element.width();

                var table = ui.element.parents('.table-wrapper').find('table#table');

                var d = Number(td_width) - Number(ui.originalSize.width);


                table_width = Number(startW_neighbor) + mouseDiff;
                table.width(table_width);

            }
        }
    });

скрипка: http://jsfiddle.net/wLbn5qjk/1/

EDIT: вы можете использовать эту логику и работать с alsoResize, результат немного лучше:

$table.find("tr:first th, tr:first td").resizable({
            handles: 'e',
            minWidth: 30,
            alsoResize: 'table',
            start: function (event, ui) {
                ui_minColWidth = $(this).resizable("option", "minWidth");
                startW = $(this).width();
                td_width = ui.element.width();
                startW_neighbor = ui.element.parents('.table-wrapper').find('table#table').width();
                startMouseX = event.pageX;
            },
            stop: function (event, ui) {

            },
            resize: function (event, ui) {;
                var mouseDiff = event.pageX - startMouseX;
                if (ui.element.width() == td_width && mouseDiff < 0) {;
                    $('table').width(table_width);
                }
                td_width = ui.element.width();
                table_width = $('table').width()

            }
        });

http://jsfiddle.net/hrzj68wp/1/

person Julien Grégoire    schedule 28.06.2015
comment
Не совсем то, что вам нужно. Если уменьшить все до минимальной ширины столбцов и последний столбец начнет растягиваться и сжиматься, все остальные столбцы начинают дергаться. Это очень заметно, когда последний столбец растягивается и сужается очень быстро. - person djmartini; 28.06.2015