Question

我试图在表格中显示一个大型数据集。

首先，我只使用嵌套的ng-repeats：

<table>
    <tr ng-repeat="row in rows">
        <td>{{row.meta}}</td>
        <td ng-repeat="cell in row.cells">{{cell.data}}</td>
    <tr>
</table>

（该代码是我的意思的一个例子，它实际上并不对应于我的数据集。下面的代码可以。）

此代码非常干净，但渲染很容易。数据集非常大（屏幕上有数千个单元格）。

我把它改写成了这个怪物：

angular.module('systeem3').directive('dayStatusTable', function(){
    return{
        restrict: 'E',
        scope: {
            housestatus: '='
        },
        link: function(scope, elem, attr) {
            // Doing this manually since the Angular way is slooow....
            scope.$watch('housestatus', function(newValue) {
                if (newValue && Array.isArray(newValue)) {
                    var stringparts = ['<table>'];
                    for (houseline of newValue) {
                        stringparts.push('<tr><td>'+houseline.houseName+'</td>');
                        for (day of houseline.daystatus) {
                            var date = day.date.split('-')[2];
                            var weekday = day.date.split('-')[3];
                            var weekendOrWeekday = (weekday == 0 || weekday == 6) ? 'weekend' : 'weekday';
                            stringparts.push('<td class="',
                                             day.status, ' ',weekendOrWeekday,
                                             '">',
                                             date,
                                             '</td>');
                        }
                        stringparts.push('</tr>');
                    }
                    stringparts.push('</table>');

                    elem.html(stringparts.join(''));
                }
            });
        },
    }
});

结果令人惊讶：它从花费几秒钟渲染到不到50毫秒，其中大部分都被elem.html()电话占用。

但是，代码看起来很糟糕，并且非常无棱角。我该如何改进？

Answer 1

对于一个非常大的表检查Angular UI Grid。它支持虚拟化（如果它们现在不可见，它不会添加到DOM行），并且可以非常流畅地处理10,000多行。

显示一张大桌子＆＃34;角度方式＆＃34;

1 个答案: