Question

我看过很多关于排序的帖子，但没有一个能回答看似典型情况的帖子。

我正在尝试使用jQuery对HTML表进行排序，其中我单击以对列进行排序的链接不存在于正在排序的表中。我“伪造”一个表头以适应滚动表的要求。

我现在所做的是 -

使用列中需要的值加载数组与行ID
根据这些值
根据排序数组中的索引将行插入HTML表。

正如预期的那样，本地运行需要近10秒钟。

代码示例 -

var sortArr = new Array();

$('tr td.' + name).each(function () {
    ResidentID = $(this).parent().attr("ResidentID");
    BID = $(this).parent().attr("BRecordID");

    if ($(this).find('select').length > 0) { //ddls
        columnText = $(this).find('select option:selected').text();
        sortArr.push({ residentId: ResidentID, bID: BID, text: columnText });
    }
    else if ($(this).find('input').length > 0) {//Textbox or checkboxes
        columnText = $(this).find('input').val();
        sortArr.push({ residentId: ResidentID, bID: BID, text: columnText });
    }
});

if (sortDirection == 'ascending') {
    colHeader.attr('sortorder', 'descending')
    sortArr = sortArr.sort(function (v, t) {
        return v.text.localeCompare(t.text);
    });
}
else {
    colHeader.attr('sortorder', 'ascending')
    sortArr = sortArr.sort(function (v, t) {
        return t.text.localeCompare(v.text);
    });
}

for (var i = 0; i < sortArr.length; i++) {
    $("[id$=fixedDataTable] > tbody > tr").eq(i).after($("[id$=trFixedDataRow_" + sortArr[i].residentId + "]"));

    $("[id$=residentDetailDataTable] > tbody > tr").eq(i).after($("[id$=trResScrollDataRow_" + sortArr[i].residentId + "]"));

    $("[id$=bDetailDataTable] > tbody > tr").eq(i).after($("[id$=trBScrollDataRow_" + sortArr[i].bmrID + "]"));
}

有没有更快的方法来实现这一目标？

Answer 1

您查找要排序的列，对其进行排序以及重新填充表的方法是正确的。但是你如何做到这一点看起来效率低下。你可以做的很少的事情来加速

避免重构jquery对象。例如，您在许多地方都有$(this)。将其缓存在本地变量中。
而不是直接操纵dom。考虑将数据放在2D数组中，直接映射到dom表。我认为这将是最大的进步。您可以根据需要对2D数组进行排序，然后重新填充dom表。

考虑根据单元格/行为每个表行提供唯一ID。这样，2D阵列可以更容易地绘制出来

回到您的代码，对于此部分代码

for (var i = 0; i < sortArr.length; i++) {
    $("[id$=fixedDataTable] > tbody > tr").eq(i).after($("[id$=trFixedDataRow_" +     sortArr[i].residentId + "]"));

    $("[id$=residentDetailDataTable] > tbody > tr").eq(i).after($("    [id$=trResScrollDataRow_" + sortArr[i].residentId + "]"));

    $("[id$=bDetailDataTable] > tbody > tr").eq(i).after($("[id$=trBScrollDataRow_" + sortArr[i].bmrID + "]"));
}

你可以在for循环之前将$("[id$=...tr")的结果保存到变量中，这样jquery就不必在每次迭代中查找它吗？你可以自己索引缓存的数据吗？

Answer 2

坚持这种排序方式似乎是唯一的方法。

jQuery - 排序HTML表

2 个答案: