时间戳

首页 > 解决方案 > Angular SlickGrid 是否可以使用分页并根据值设置行颜色？

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

问题描述

是否可以在 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();
    });   
}

标签： cssangulartypescriptpaginationslickgrid

解决方案

试试这个方法：

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您可以在此处查看有关此特定主题的原始文档： Dynamicly Add CSS Classes to Item Rows

推荐阅读