1

我有通过 jQuery 发送 ajax 请求后填写的表格。每 10 秒后发出 ajax 请求，它返回大量数据（大约 1000 行 - 我知道分页，但它不是我的选择）。目前我正在重新创建每个请求的所有行。是否有可能我只能修改与以前结果集不同的行？

我的页面将当前结果集缓存在一个数组中，然后对于每个后续请求，我将新结果集与前一个结果集进行比较，并在更改时删除当前的 html 表并重新创建它。呈现新 HTML 表格的过程需要花费大量时间，我想知道是否有办法减少这种情况。

我已经尝试搜索它，但找不到任何与之相关的东西。我只需要知道是否可以使用任何 jquery 插件？或者我应该采用什么策略来修改更改的行并删除新数据集中不存在的行。

编辑：这是我拥有的当前代码

var sCurrentStr = "";
var sPreviousStr = "";
var bFirstRequest = true;
function OnGetListSuccess(sResponse)
{

    //build table from the response
    $(xmlDoc).find('Table').each(function ()
    {

        var sTitle = $(this).find('Title').text();
        var dBCDate = parseStringToLocalDate($(this).find('BCDateTime').text());
        var sDestination = $(this).find('DestinationName').text();

        //GetLocalDateFromUTCDate
        var dStartDate = parseStringToLocalDate($(this).find('StartDateTime').text());
        var dEndDate = parseStringToLocalDate($(this).find('EndDateTime').text());


        sCurrentStr += sTitle + dBCDate + sDestination + (dStartDate.toLocaleString()) + (dEndDate.toLocaleString());
    });

    if (bFirsRequest)
    {
        //cache results in sPreviousStr
        sPreviousStr = sCurrentStr;
        bFirstRequest = false;
    }

    if (sCurrentStr != sPreviousStr)
    {
        $(xmlDoc).find('Table').each(function ()
        {
                    $('<tr onclick="javascript:GetRowDetails(this)"></tr>').html('<td>' + '1' + '</td>' +

                        '<td style="width:0px;display:none" class="hiddenSearchClass">' + sCurrentStr + '</td>' +
                        '<td>' + sTitle + '</td>' +
                        '<td>' + dBCDate.toLocaleString() + '</td>' +
                        '<td>' + sDestination + '</td>' +
                        '<td>' + dStartDate.toLocaleString() + '</td>' +
                        '<td>' + dEndDate.toLocaleString() + '</td>'
                        )
                    .appendTo('#MyHTMLTable');
        });
    }
    else
    {
     //no changes ignore it
     sPreviousStr = sCurrentStr;
    }

}
4

3 回答 3

2

如果您绝对无法从数据库中取回 uid，您是否探索过在 ajax get 上“几乎唯一标识”一行的选项？例如：

 <tr id="column1_column2_column3_column4_column5_column6_...">...</tr>

其中column1etc 是该行列的结果，然后通过 ajax 响应在循环上执行如下所示的函数。

// create objects to store fragments
var $deleteThese = $();
var $addThese = $();

// run your ajax call, plus the loop through ajax response;

function loopThroughAjaxResponse( result ) {

  // store a dom reference to the "practically unique" row
  var $thisRow = $('#'+result.column1+'_'+result.column2+'_...');
  var $appendThis;

  // decide if the row already exists, if it does we 
  // append to the delete fragment
  if( $thisRow.length > 0 ) {
    $deleteThese = $deleteThese.add( $thisRow );
  }

  // and we append a newly created row to the append
  // fragment regardless.
  $appendThis = $('<tr id='+result.column1+'_'+result.column2+'_...>...</tr>');
  $addThese.append( $appendThis );

}

// then outside of the loop (importantly) we remove all
// the dom elements, and add them all at once.
$deleteThese.remove();
$addThese.appendTo( $('table') );

这都是理论代码，因此您必须采用整体理论并将其应用于您的代码，因为您没有粘贴任何示例代码:)

于 2013-08-28T16:06:11.510 回答
2

您目前正在构建一个巨大currentString的 ，然后您只能从中确定整个表是否已更改（顺便说一句，您previousString每次更改时都忘记更新，您只是在第一次请求后才这样做）。

取而代之的是，您应该存储单行（xml<Table>元素）和对需要更新的 html 行的引用。

var data = [];
function OnGetListSuccess(response) {
    //build table from the response
    var l = $(xmlDoc).find('Table').each(function(i) {
        var title = $(this).find('Title').text(),
            BCDate = parseStringToLocalDate($(this).find('BCDateTime').text()),
            destination = $(this).find('DestinationName').text(),
            startDate = parseStringToLocalDate($(this).find('StartDateTime').text()),
            endDate = parseStringToLocalDate($(this).find('EndDateTime').text());

        var prev = data[i];
        if (!prev // new element
          || prev.title!=title || +prev.BCDate!=+BCDate || prev.destination!=destination || +prev.startDate!=+startDate || +prev.endDate!=endDate) {
            data[i] = update(prev && prev.html, {
                title: title,
                BCDate: BCDate,
                destination: destination,
                endDate: endDate
            });
        }
    }).length;
    // remove deleted elements
    $.each(data.splice(l), function() {
       this.html.remove();
    });
}
function update(row, obj) {
    if (!row)
        obj.html = row = $("<tr>").click(function(e) {
            GetRowDetails(this); // can probably simplified by passing obj now
        }).appendTo('#MyHTMLTable');
    row.empty().html('<td>' + '1' + '</td>' +
                     '<td>' + obj.title + '</td>' +
                     '<td>' + obj.BCDate.toLocaleString() + '</td>' +
                     '<td>' + obj.destination + '</td>' +
                     '<td>' + obj.startDate.toLocaleString() + '</td>' +
                     '<td>' + obj.endDate.toLocaleString() + '</td>'
                    );
    return obj;
}

该脚本不能最好地处理任意位置的删除和插入（升级您将使用某种随机访问 ID），但您可以看到现在的情况。

于 2013-08-28T16:45:34.347 回答
2

如果所有行都有一个id从 Ajax 请求返回的唯一行，您可以将其添加为最初在<tr>'s 上的属性或类名，然后删除/编辑这些<tr>'s，当您注意到它们已在最新版本中被删除时行集或已编辑。

然后，您还可以添加另一个类，<tr>例如updated当您完成对表格的修改后，您可以为背景颜色更改设置动画，该更改在这些 's 上淡出<tr>并同时删除“更新”类。这样用户就可以看到哪些行发生了变化——类似于股票市场价格屏幕。

一旦您知道需要更新/删除哪些行并且您有可靠的方法或访问这些单独的行（通过上面提到的唯一标识符），这一切都可以通过 jQuery 轻松实现。如果您需要任何帮助，请发布您的 HTML 表的示例和您返回的 Ajax 数据到jsfiddle

于 2013-08-28T15:43:18.753 回答