jquery's auswählbares plugin ist sehr langsam

Question

es ist langsam, wenn auf riesigen listen, etc., wie es schnell machen?

Answer 1

Wenn Sie eine riesige Liste haben, werden Sie die teure autoRefresh option wie diese deaktivieren:

$(".mySelector").selectable({ autoRefresh: false }); 

Wenn Sie (zB auf stop) möchten, können Sie sich erfrischen, wie folgt aus:

$(".mySelector").selectable("refresh"); 

Answer 2

Im Gegensatz zu anderen jquery-ui-Methoden wird selector auch auf verschachtelte Elemente angewendet.

jQuery('#content').selectable({ 
filter: '>*', 
}); 

Answer 3

jQuery UI auswählbaren alle Elemente der DOM-Struktur annimmt, begrenzen die Anzahl der Elemente, die denen, die in der Spitze sind: Direkt Vorfahren verwenden auszuwählen. Fügen Sie einen Filter:

$("#items").selectable({filter: 'li'}); 

http://forum.jquery.com/topic/major-performance-problems-with-selectable

Answer 4

Ich fand, dass jquery.selectable in älteren Browsern sehr langsam ist (wie IE7 und 8), weil es die .Offset() -Methode für jedes Element rufen. Ich habe es für die Zellen in einer Tabelle verwendet, so dass ich die Anzahl der Offset() - Aufrufe für jede Zeile und für jede Spalte reduzieren konnte (anstelle eines Aufrufs für jede Zelle), indem ich eine modifizierte Version von das Plugin mit einer modifizierten Refresh-Funktion. Dies machte die Leistung für große Tabellen akzeptabel. Das cellPositions-Array enthält die horizontale Position für jede Spalte.

 this.refresh = function() { 
      var cellPositions = []; 
      var firstRow = true; 
      selecteeRows = $("tr", self.element[0]); 
      selecteeRows.each(function() { 
       var row = $(this); 
       // adding any filters here seems to slow down IE a lot 
       // self.options.filter is not used!! 
       var selecteeCells = $(row).find("td"); 
       if (firstRow && selecteeCells.length > 0) { 
        for (var i = 0; i < selecteeCells.length; i++) { 
         cellPositions[i] = $(selecteeCells[i]).offset().left; 
        } 
        cellPositions[selecteeCells.length] = cellPositions[selecteeCells.length - 1] + $(selecteeCells).outerWidth(true); 
        firstRow = false; 
       } 
       if (selecteeCells.length > 0) { 
        var top = $(selecteeCells).first().offset().top; 
        var bottom = top + $(selecteeCells).first().outerHeight(); 
        var i = 0; 
        selecteeCells.each(function() { 
         var $this = $(this); 
         first = false; 
         $.data(this, "selectable-item", { 
          element: this, 
          $element: $this, 
          left: cellPositions[i], 
          top: top, 
          right: cellPositions[i + 1], 
          bottom: bottom, 
          startselected: false, 
          selected: $this.hasClass('ui-selected'), 
          selecting: $this.hasClass('ui-selecting'), 
          unselecting: $this.hasClass('ui-unselecting') 
         }); 
         i++; 
        }); 
       } 
      }); 

     }; 

Edit: Hier ist ein Link auf den Code in Github: https://github.com/dfjackson/jquery.ui.selectableTable

Answer 5

Ich weiß, das zu spät ein paar Jahren, aber ich habe versucht worden, auf einem 50x100 auswählbaren Gefühl bissig zu bekommen Tabelle.

Ich habe festgestellt, dass, wenn ich die auswählbar auf dem Container der Tabelle div (mit) vor dem Einfügen der Tabelle Inhalt erstellt es läuft super schnell. In Firefox wurde es in etwa 1 ms instanziiert (im Vergleich zu etwa 100 bei der Erstellung von bereits vorhandenen Inhalten).