是否可以为 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();
});
}
最佳答案
试试这个方法:
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
关于css - Angular SlickGrid 是否可以使用分页并根据值设置行颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61922784/