jeecg3.7 DataGrid探索之更改特定单元格的背景颜色
jeecg中的DataGrid我用的easyui的样式,其他的没试过,这边博客就以此为基础提供思路。
在easyui的DataGrid说明文档中我找到以下方法:
jeecg中的自定义标签也有类似的说明
但是没有对特定单元格进行操作的,现在我有大概7列左右的单元格显示的都是“是”或“否”,为了直观的表达,我想将这些“是”或“否”的单元格背景颜色换成绿色(是)红色(否)。
打开浏览器检查窗口,我发现在td还有一个div是自动充满整个单元格的,而配合jeecg中的两个属性——formatterjs和onLoadSuccess,我们可以达成这个效果。
首先说明这两个属性的效果。formatterjs是引用js使该列的值格式化(个人理解),onLoadSuccess则是数据加载完成后执行的方法,有必要说明一下,onLoadSuccess将在formatterjs之后被执行,毕竟formatterjs是在数据加载时执行的。
那么我们就可以利用formatterjs在值的外面包一层div,根据需要设置不同的class,然后通过div找到它的父容器,最后改变父容器的样式。在这里需要注意的是他这里td的下一层容器div是有padding的,这也是我为什么要更改父容器的背景而不是直接加一个有颜色的div