Angular SlickGrid是否可以使用分页和根据值设置行的颜色？

Question

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

我使用了getItemMetadata，就像其他（旧）帖子中建议的那样--例如 SlickGrid。如何循环浏览每一行并根据条件设置颜色？.

这段代码。

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 关于这个特定主题，请点击这里。为项目行动态添加CSS类