Как избежать прокрутки в начало JQuery UI с длинной таблицей внутри при добавлении новых строк? - PullRequest
Новая
       19

Как избежать прокрутки в начало JQuery UI с длинной таблицей внутри при добавлении новых строк?

0 голосов
/ 28 мая 2011

У меня есть таблица из нескольких строк в аккордеоне JQuery UI.

Я динамически добавляю таблицу следующим образом: 

var resJson = JSON.parse(connector.process(JSON.stringify(reqJson)));
    for ( var i in resJson.entryArrayM) {
        // test if entry has already been displayed
        if ($("#resultTr_" + resJson.entryArrayM[i].id) == null)
            continue;
        $("#resultTable > tbody:last").append(listEntry.buildEntryRow(resJson.entryArrayM[i]));
    }

Сначала проверяю, существует ли строка с таким же идентификатором tr.Если нет, я бы добавил к последнему ряду таблицы.

Это работает.Но проблема в том, что каждый раз, когда добавляется строка, аккордеон прокручивается до первого ряда таблицы.Поскольку таблица очень длинная, пользователям неудобно прокручивать снова и снова, чтобы посмотреть новые добавленные строки.Так как этого избежать?

1 Ответ

0 голосов
/ 28 мая 2011

Прежде всего, просто сделайте один append вместо добавления каждый раз через цикл: 

var resJson = JSON.parse(connector.process(JSON.stringify(reqJson)));
var seen    = { };
var rows    = [ ];
var trId    = null;
for(var i in resJson.entryArrayM) {
    // test if entry has already been displayed
    var trId = 'resultTr_' + resJson.entryArrayM[i].id;
    if($('#' + trId).length != 0
    || seen[trId])
        continue;
    rows.push(listEntry.buildEntryRow(resJson.entryArrayM[i]));
    seen[trId] = true;
}
$("#resultTable > tbody:last").append(rows.join(''));

Также обратите внимание, что я исправил ваш тест на существование, $(x) возвращает пустой объект, когда x ничего не соответствует, не null.Мало того, что это намного эффективнее, вам придется иметь дело только с одним изменением позиции прокрутки.

Решение вашей проблемы с прокруткой довольно просто: выясните, какой элемент прокручивается, сохраните его scrollTop додобавьте и сбросьте его scrollTop после добавления: 

var $el       = $('#whatever-is-scrolling');
var scrollTop = $el[0].scrollTop;
$("#resultTable > tbody:last").append(rows.join('')); // As above.
$el[0].scrollTop = scrollTop;

Может быть небольшое видимое мерцание, но мы надеемся, что оно будет потеряно при изменении таблицы.

Вы можететакже попробуйте установить table-layout свойство CSS <table> на fixed.Это удержит таблицу от попыток изменить ее ширину или ширину столбцов, что может остановить прокручиваемое поведение, которое вы видите.Недостатком является то, что вам придется самостоятельно обрабатывать размеры колонки.Но вы можете попробовать установить table-layout:fixed непосредственно перед операцией append, чтобы минимизировать трудности.

...