Блог

У меня есть таблица из многих строк в аккордеоне пользовательского интерфейса jQuery.

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

 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 уже. Если нет, я бы дополнил последнюю строку таблицы.

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

Прежде всего, просто выполните одну 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 операцией, чтобы свести к минимуму хлопоты.