表導航和行選擇

我有一個包含約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); 
});

任何建議嗎？

來源

2011-04-22 Deepak

我認爲任何腳本將是緩慢的有1000行。你有沒有想過把桌子弄得更多？或一次呈現表格塊？ – Mottie 2011-04-22 13:38:28

數據已從視圖而非表格中檢索。問題不在於獲取數據，因爲我分析檢索記錄並通過在數據集中循環創建HTML表格只花了兩分鐘，但大部分時間（大約12-15秒）都是由插件和我擁有的代碼創建用於生成所選行的JSON對象。 – Deepak 2011-04-23 09:06:07

假設我沒有錯過源代碼中的任何東西，這個插件似乎存在一些性能問題：首先，它將關鍵事件綁定到*每一行*而不是在例如。整桌子;其次，它不是緩存表中的下一行，而是執行一個選擇器查詢。前者尤其會提升初始化時間和記憶力。 – 2012-09-26 15:38:46

你可以做的一件事就是優化你的jQuery選擇器，以幫助Sizzler更快地工作...... 而不是所有文檔的keyup，如何關閉特定tr的keyup？

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

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

保存外循環選定的TR，你問的炙熱通過循環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;

來源

2012-09-26 15:16:46 Ayyash

表導航和行選擇

回答

相關問題