UI Grid 垂直滚动性能不佳答案

【问题标题】：UI Grid Poor Vertical Scroll PerformanceUI Grid 垂直滚动性能不佳
【发布时间】：2023-04-04 09:10:01
【问题描述】：

我正在使用新的 Angular UI Grid v3.0.7，并且在使用自定义单元格模板时遇到垂直滚动问题。我的网格有 15 列 83 行，所以它不是一个大数据集。我的单元格模板只是一个跨度，它有一个基于布尔值添加复选标记或十字（例如 IcoMoon）的类。单元格模板在应用于单列时很好，但在添加超过 3 列时会迅速恶化。我必须将其应用于 13 列。这里是单元格模板函数：

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>"
        }
    }

这显然是一个人为的例子，但解决了垂直滚动问题。有没有人遇到过这个问题？有什么解决方法吗？

【问题讨论】：

你能在 plunker 中复制这个吗？它真的会帮助其他愿意帮助你的人！
我绕过它的方法是不使用单元格模板，而是使用单元格类：

标签： angularjs angular-ui-grid

【解决方案1】：

我通过提供单元类而不是单元模板解决了这个性能问题。老实说，第一种方法应该有效，它正确地渲染了字体，但你不能平滑滚动。

        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(' ');
        }

【讨论】：