Question

我有通过jQuery发送ajax请求后填写的表。 ajax请求是在每10秒后发出的，它返回了大量数据（大约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;
    }

}

Answer 1

如果所有行都有来自Ajax请求的唯一id，您可以在<tr>上最初将其作为属性或类名添加，然后删除/编辑{{1}当你注意到它们已经在最新的行集中被删除或者被编辑时。

然后，您还可以向<tr>添加另一个类，例如<tr>，当您完成对表格的修改后，您可以设置背景颜色变化的动画，这些颜色更改会在updated上消失。并同时删除'已更新'课程。这样，用户可以看到哪些行已更改 - 类似于股票市场价格屏幕。

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

Answer 2

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

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

其中column1等是此行列的结果然后通过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') );

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

Answer 3

您目前正在构建一个巨大的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），但您可以看到它现在的位置。

仅渲染html表中的已修改行

3 个答案: