Question

我使用新的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>"
        }
    }

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

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

UI网格不良垂直滚动性能

1 个答案: