css - Angular SlickGrid 是否可以使用分页并根据值设置行颜色？

Question

是否可以为 slickgrid 中的一行设置背景颜色(基于数据值)并使用分页？对于 angular-slickgrid 包。

我使用 getItemMetadata 作为建议的多个其他(旧)帖子 - 示例 SlickGrid: How to loop through each row and set color based on the condition? .

这段代码:

metadata(old_metadata_provider) {  
    return function(row) {  
        var item = this.getItem(row);  
        var ret  = (old_metadata_provider(row) || {});  

        if (item) {  
            ret.cssClasses = (ret.cssClasses || '');  
            if ("attribute" in item) {  
                return { cssClasses: 'redRow' }; //redRow is in styles.css  
            }  
        }  

        return ret;  
    }  
}  

电话是:

this.dataViewObj.getItemMetadata = this.metadata(this.dataViewObj.getItemMetadata);

它工作正常。但是，当我打开分页时，颜色无法按预期工作。我读到 SlickGrid 在滚动或分页时重新使用相同的行元素，并将覆盖与它们关联的样式。还有另一种方法吗？感谢您对此的任何帮助。

在阅读了 ghiscoding 的建议后，我尝试添加以下代码，但启用分页时颜色仍然不起作用。

angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.dataViewObj = angularGrid.dataView;
    this.gridObj = angularGrid.slickGrid;
    this.checkRowBackgroundColor(); //where I call the metadata function from my previous post, if the dataView object is defined.

    //I added this code:
    var self = this;
    this.dataViewObj.onPagingInfoChanged.subscribe(function (e, dataView, grid) {
            self.gridObj.invalidate();
            self.gridObj.render();
    });   
}

Answer 1

试试这个方法:

angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.dataViewObj = angularGrid.dataView;
    this.gridObj = angularGrid.slickGrid;

    // check color change logic for the first time page load
    this.checkRowBackgroundColor();

    // use arrow function so that 'this' works properly
    this.dataViewObj.onPagingInfoChanged.subscribe((e, dataView, grid) => {
        // check your color change logic every time Paging Info Changed
        this.checkRowBackgroundColor();
    });   
}

在您的 checkRowBackgroundColor 内:

checkRowBackgroundColor() {
    // ... any of your logic

    // get metadata
    this.dataViewObj.getItemMetadata = this.metadata(this.dataViewObj.getItemMetadata);

    // rerender the grid after getting new metadata
    this.gridObj.invalidate();
    this.gridObj.render();
}

你的问题现在应该解决了。由于我没有在我的本地机器上测试过，我不能给出保证。您可以查看 angular-slickgrid 的原始文档关于此特定主题: Dynamically Add CSS Classes to Item Rows