Question

所以在普通表中，我有这个指令：

app.directive('highlightOnChange', function () {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe('highlightOnChange', function (val) {
                element.addClass('flight-item-highlighted');
                setTimeout(function () {
                    element.removeClass('flight-item-highlighted');
                }, 300);                
            });
        }
    };
});

这在表中使用时效果很好：

<td highlight-on-change="{{value}}" ng-repeat="(key,value) in items"></td>

想法是在更新后突出显示特定单元格。这是必需的，因为它是一个实时应用程序，意味着更改将来自服务器，并且需要在更改时突出显示以便让用户知道。

但是现在我正在使用延迟加载数据的Angular UI-Grid（这对性能很好）但对此功能不太好。

我能够通过定义一个单元格模板来实现它：

<div class="ui-grid-cell-contents" highlight-on-change="{{grid.getCellValue(row, col)}}">{{grid.getCellValue(row, col)}}</div>

将它放在选项中：

$scope.tableColumns = [
    { field: 'name', displayName: 'Firstname', width:100, visible: true, cellClass: self.cellClass, cellTemplate: '/Templates/gridcelltemplate.html' },
    { field: 'gender' }, { field: 'company' }];

$scope.gridOptions = {
    data: self.data,
    columnDefs: self.tableColumns,
    enableColumnResizing: true,
    enableColumnMenus: false,
    rowTemplate: '/Templates/rowtemplate.html',
    headerTemplate : '/Templates/headertemplate.html',
};

但结果是元素总是在滚动时突出显示，显然是因为它们是在那时创建的（虽然它确实适用于单个更新）。

因此，我想到的一个解决方案是在数据发生变化时从控制器更改特定列的css类。但是因为索引会在特定行的滚动上发生变化，所以没有任何意义。（因为行索引总是从0到x，其中x是最后显示的行）。

我能做的另一个解决方案是保持相同的指令，给出一个可以调用我的控制器的函数。控制器会以某种方式检查值是否为新值，如果是，则返回true。然后会产生一个亮点。

内部指令：

        ....
        scope: {
            changed: '&',
        },
        link: function (scope, element, attrs) {
            attrs.$observe('highlightOnChange', function (val) {
                //now observed value of column, it has changed, call controller to check if it is a new value
                var result = scope.changed({ val: val });
        ....

html模板：

 <div class="ui-grid-cell-contents" highlight-on-change="{{grid.getCellValue(row, col)}}" changed="grid.appScope.columnChanged(val)">{{grid.getCellValue(row, col)}}</div>

老实说，我宁愿禁用延迟加载，这实际上可以解决很多问题。

编辑：

好吧，通过设置gridOptions.virtualizationThreshold: self.data.length我发现延迟加载已被禁用。但当然这会带来一些主要的性能问题（大约有20列，1000行）。所以也许更优雅的方式会很好：）

突出显示单元格更改（可能禁用延迟加载）

0 个答案: