jquery의 선택 가능한 플러그인이 매우 느림

Question

거대한 목록 등에 사용될 때 속도가 느립니다. 어떻게 빠르게 할 수 있습니까? 당신이 큰 목록이있는 경우

Answer 1

, 당신은이 같은 고가의 autoRefresh option을 비활성화 할 수 있습니다 :

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

당신이 원하는 (예를 들어 stop에) 당신이 이런 식으로 자신을 새로 고칠 수 있습니다 :

를

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

Answer 2

다른 jquery UI 메소드와 달리 selector는 중첩 된 요소에도 적용됩니다. 직계 선조 사용 선택 :

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

Answer 3

jQuery를 UI 선택할가 DOM 구조의 모든 요소를 ​​얻어, 상단에있는 것에 소자의 수를 제한한다. 필터를 추가

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

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

Answer 4

나는 이전 버전의 브라우저에서 매우 느린 jquery.selectable 것으로 나타났습니다 (IE7 등 8)은 각 항목에 .offset() 메서드를 호출하기 때문에. 테이블의 셀에 사용 했으므로 각 행에 대해 하나씩, 모든 셀에 대해 하나의 호출 대신 각 열에 대해 .offset() 호출 수를 줄일 수있었습니다. 새로 고침 기능이 수정 된 플러그인 이로 인해 대형 테이블에서 성능을 수용 할 수있게되었습니다. cellPositions 배열은 각 열의 가로 위치를 유지합니다.

 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++; 
        }); 
       } 
      }); 

     }; 

편집 :는 여기 github의의 코드 링크입니다 :이 너무 늦게 몇 년 알고 https://github.com/dfjackson/jquery.ui.selectableTable

Answer 5

,하지만 난 50x100에서 선택 느낌 물어을 얻으려고 노력 했어요 표.

표 내용을 삽입하기 전에 표의 컨테이너 div (filter:'td')에 선택 항목을 생성하면 매우 빠르게 실행된다는 것을 발견했습니다. 파이어 폭스에서 그것은 약 1ms (기존 콘텐츠에 그것을 만들 때 약 100에 비해)에 인스턴스화했다.