Le plugin sélectionnable de jquery est très lent

Question

il est lent lorsqu'il est utilisé sur d'énormes listes, etc. comment le rendre rapide?

Answer 1

Si vous avez une liste énorme, vous voulez désactiver le autoRefresh option cher comme ceci:

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

Lorsque vous voulez (par exemple sur stop), vous pouvez vous rafraîchir, comme ceci:

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

Answer 2

Contrairement à d'autres méthodes jquery ui, le sélecteur est appliqué même sur les éléments imbriqués. de ne sélectionner que les ancêtres directs utilisent:

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

Answer 3

sélectionnable jQuery UI prend tous les éléments de la structure de DOM, limiter le nombre d'éléments à ceux qui sont dans la partie supérieure. Ajouter un filtre:

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

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

Answer 4

Je trouve que jquery.selectable est très lent dans les anciens navigateurs (comme IE7 et 8), car il doit appeler la méthode .Offset() sur chaque élément. Je l'utilisais sur les cellules dans une table, donc j'étais capable de réduire le nombre d'appels .offset() à un pour chaque ligne et un pour chaque colonne (au lieu d'un appel pour chaque cellule) en faisant une version modifiée de le plugin avec une fonction d'actualisation modifiée. Cela a rendu la performance acceptable pour les grandes tables. Le tableau cellPositions contient la position horizontale pour chaque colonne.

 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: est ici un lien vers le code dans github: https://github.com/dfjackson/jquery.ui.selectableTable

Answer 5

Je sais que c'est quelques années trop tard, mais j'ai essayé d'obtenir Snappy sentiment sélectionnable sur un 50x100 table.

J'ai trouvé que si je crée le selectable sur le conteneur div de la table (avec filter:'td') avant d'insérer le contenu de la table, il fonctionne très vite. Dans firefox, il instanciait en environ 1ms (comparé à environ 100 en le créant sur du contenu préexistant).