表格导航和行选择答案

【问题标题】：Table Navigation and row selection表格导航和行选择
【发布时间】：2011-04-22 10:01:37
【问题描述】：

我有一个包含大约 1000 行和 26 列的 HTML 表。我正在使用this jQuery plugin 在行之间导航并进行选择。

我的第一个问题是插件运行良好，但是即使使用最新版本 (0.6.1)，它在处理 1000 行时也很慢。

我的第二个问题是我想创建一个 JSON 对象来表示从表中选择的行。我写了一个函数来做到这一点，但在这么大的桌子上又太慢了。以下代码有效，但我想对其进行优化：

$(document).bind("keyup", function(event) {
    var jsonText = "";
    var i = 0;
    var td_size = $("tr.selected td").size();
    jsonText += "{";
    for (i = 0; i < td_size; i++) {
        if (i < td_size - 1) {
            if (i == 0) {
                // Get link URL.
                jsonText += "\"" + $("thead tr th").eq(i).text() + "\":\"" + $("tr.selected td").eq(i).find("a").attr("href") + "\",";
            } else {
                jsonText += "\"" + $("thead tr th").eq(i).text() + "\":\"" + $("tr.selected td").eq(i).text() + "\",";
            }
        }
        else {
            jsonText += "\"" + $("thead tr th").eq(i).text() + "\":\"" + $("tr.selected td").eq(i).text() + "\"";
        }
    }
    jsonText += "}";
    $('#content').html('').append(jsonText);
});

有什么建议吗？

【问题讨论】：

我认为任何 1000 行的脚本都会很慢。你有没有想过把桌子拆开一点？还是一次展示几块桌子？
数据已从视图而不是表中检索。问题不在于获取数据，因为我分析通过在数据集中循环检索记录和创建 HTML 表只需要两分钟，但大部分时间（大约 12-15 秒）已被插件和我拥有的代码占用创建以生成所选行的 JSON 对象。
假设我没有遗漏源代码中的任何内容，这个插件似乎存在一些性能问题：首先，它在 每一行 上绑定关键事件，而不是例如整张桌子；其次，它不是缓存表中的下一行，而是执行选择器查询。前者尤其会增加初始化时间和内存。

标签： javascript jquery asp.net json jquery-plugins

【解决方案1】：

您可以做的一件事是优化您的 jQuery 选择器以帮助 Sizzler 更快地工作...... 而不是竞标所有文档的keyup，特定tr的keyup怎么样？

$("tr.selected td").size(); // slow

$("table").find(".selected").find("td"); // probably faster

将选定的 tr 保存在循环之外，您要求 sizzler 通过循环 1000 行来查找您的对象 26 次！

$("thead tr th").eq(i) // on every loop element? slow, try saving the information before the keyup event, they are not going anywhere are they?

所以可能这样的事情会更快：

var $allTrs = $("tr");
var $allHeads = $("thead tr th");

$allTrs.bind("keyup", function(event) {
    var jsonText = "";
    var i = 0;
    var $t = $(this),
        $alltds = $t.find("td"),
        td_size = $alltds.length();
    jsonText += "{";
    $.each($alltds, function(i){
      jsonText += "\"" + $allHeads.eq(i).text() + "\":\"";
      if (i == 0){ // you have a strange condition, will leave it up to u
           // append link
           jsonText += $(this).find("a").attr("href"); // i remove "" for better readability 
      }else{
          // append text
           jsonText += $(this).text();
      }

   });
jsonText += "}";


    $('#content').text(jsonText); // cheaper than html
});

我还没有测试过。

你也可以直接创建一个 json 对象（虽然不会影响速度），像这样

var mynewjson = {};

然后在循环内：

mynewjson[name] = value;

【讨论】：