UI網格縱向滾動性能差

我正在使用新的Angular UI Grid v3.0.7，並且在使用自定義單元格模板時出現垂直滾動問題。我的網格有15列，83行，所以它不是一個大的數據集。我的單元格模板只是一個跨度，它具有一個基於布爾值添加複選標記或交叉（例如IcoMoon）的類。單元格模板適用於單列時很好，但添加3個以上時會很快惡化。我必須將它應用於13列。下面是電池模板函數：UI網格縱向滾動性能差

function checkCrossCellTemplate() { 
     return '<span ng-class="{\'icon-checkmark\': row.entity[col.field]===true, \'icon-cross\': row.entity[col.field]===false}"></span>' 
    }

我認爲這個問題涉及的條件，因爲它是殺死平滑滾動被應用，我也試着用NG-IF但性能問題仍然矗立着一個不同的方法。爲了證明我的理論，我想出了另一個功能：

function checkCrossCellTemplate() { 
     if(Math.random() <= 0.5) { 
      return "<span class='icon-checkmark'></span>" 
     } else { 
      return "<span class='icon-cross'></span>" 
     } 
    }

這顯然是一個人爲的例子，但解決了垂直滾動問題。有沒有人遇到過這個問題？有沒有解決方法？

來源

2015-12-03 user3034151

你可以複製這在一個蹲？這真的會幫助其他人願意幫助你！ – imbalind

我得到的方式是不使用單元格模板，而是使用單元格類： – user3034151

我通過提供單元類而不是單元模板來解決此性能問題。說實話，第一種方法應該工作，它正確地呈現字體，但你不能順利滾動。

 function myCellClass(grid, row, col, rowRenderIndex, colRenderIndex) { 

      var value = grid.getCellValue(row, col), 
       cellClasses = []; 

      if(typeof value === 'boolean') { 
       if(value) { 
        cellClasses.push('icon-checkmark'); 
       } else { 
        cellClasses.push('icon-cross'); 
       } 
      } 

      if(rowRenderIndex % 2 !== 0) { 
       cellClasses.push('table-row'); 
      } 

      return cellClasses.join(' '); 
     }

來源

2015-12-04 12:13:12 user3034151

UI網格縱向滾動性能差

回答

相關問題