Навигация по таблице и выбор строки

Question

У меня есть HTML-таблица, которая содержит около 1000 строк и 26 столбцов.Я использую этот плагин jQuery для навигации между строками и выбора.

Моя первая проблема в том, что плагин работает нормально, но - даже с использованием последней версии (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);
});

Есть предложения, пожалуйста?

Answer 1

Одна вещь, которую вы можете сделать, это оптимизировать ваши селекторы jQuery, чтобы помочь Sizzler работать быстрее ... вместо того, чтобы рассчитывать на keyup всего документа, как насчет keyup определенного tr?

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

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

СохранитеВыбрав tr вне цикла, вы просите sizzler найти ваш объект 26 раз, зациклив 1000 строк!

$("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;