如何避免JQuery UI手风琴里面的长表从滚动到开始添加新行时开始？

Question

我有一个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 ID的行已存在。如果没有，我会追加到表格的最后一行。

它的工作原理。但问题是：每次追加行时，手风琴都会滚动到表格的第一行。由于表格非常长，因此用户不便一次又一次向下滚动查看新添加的行。那么如何避免这种情况呢？

Answer 1

首先，只是做一个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 property of the <table> to fixed。这将防止表格试图调整其宽度或列宽，这可能会阻止您看到的滚动行为。缺点是你必须处理你自己的专栏。但是，您可以在您的append操作之前立即尝试设置table-layout:fixed以最大限度地减少麻烦。