找回密码
 立即注册

QQ登录

只需一步,快速开始

James.Lv 讲师达人认证 悬赏达人认证 活字格认证 Wyn认证
超级版主   /  发表于:2020-2-10 09:07  /   查看:2980  /  回复:3
本帖最后由 Eden.Sun 于 2023-1-5 18:57 编辑

我们在设计一个表格的时候,有时候需要根据个人喜好或者企业风格来设计表格的样式风格。如下图所示: image.png832109680.png
(表格中隔行交替背景色)
产品内置了许多外观样式,可以进行选择实现表格的交替行颜色变化,如果内置外观样式不满足需求时,您可以自定义任意的外观样式。
本贴介绍怎么在表格中添加交替行背景色。
image.png654823302.png image.png939001159.png
重点:表格实现交替行背景色变化是利用报表丰富的表达式能力,根据表达式的条件来对每行的表格进行不同的背景颜色设定。
(例如:奇数行为一种颜色,偶数行另外一种颜色)
实现方法:
1.可以选择利用产品默认一些外观样式来进行选择合适的交替行颜色来实现,当然这个也是利用报表的表达式能力实现的,后面我会详细介绍。
2.如果理解了根据表达式实现的原理,那么你就可以根据自己的喜好随心所欲的任意实现表格交替行颜色,并且可以选择任意颜色。(例如:每隔3行交替颜色等等)

具体过程:
1.创建报表,绑定数据集,添加表格,并在表格上绑定需要展示的字段。
image.png650321654.png

2.表格创建好默认自带有一种交替行颜色的外观样式,如果需要替换,首先可以选择产品默认自带的一些样式。
选中整个表格,并在属性设置中——页面布局——外观样式,可以选择产品默认自带的一些样式风格。
image.png716547240.png
选择之后可以进行预览查看效果,挑选自己喜欢的风格。
image.png698661498.png

3.如果产品默认自带的外观样式不能满足需求时,可以根据需求进行自定义外观样式。
表格的交替行颜色变化是利用报表丰富的表达式能力实现的,产品默认自带的也是,所以可以根据自己需求自定义任意的外观样式。
在表格中选中明细行,在属性设置中选择文本框——背景选项——颜色属性,这个属性就是用来控制表格明细行的颜色显示的。
image.png185231932.png
可以下拉选择某个单一颜色,也可以根据表达式,来根据需求实现自定义外观样式(下面举例实现每隔3行交替行颜色)
image.png194023741.png
点击表达式,可以看到产品默认自带的隔行交替行颜色的实现方式,就是利用表达式能力实现偶数行和奇数行颜色交替
  1. =IIF(RowNumber(Nothing) Mod 2, Theme.Colors(1,4), "Transparent")
复制代码
判断当前行号与2的取模运算的结果为True,还是False,来控制颜色显示,当为True显示Theme.Colors(1,4)颜色,为False时显示为"Transparent"透明颜色
image.png686455688.png
现在我们要实现每隔3行表格的行颜色变化,很简单,只需要对上面的表达式进行简单的修改就行。
判断当前行号与3的取模运算的结果为True,还是False,来控制颜色显示,当为True显示Theme.Colors(2,8)颜色,为False时显示为Theme.Colors(1,4)颜色
  1. =IIF(RowNumber(Nothing) Mod 3, Theme.Colors(2,8), Theme.Colors(1,4))
复制代码

image.png305356444.png
设置好后点击保存并进行预览即可看到效果。
image.png744614562.png

4.了解了表格交替行背景颜色的实现原理之后,大家可以根据需求对表格进行任意的自定义样式设置。



3 个回复

倒序浏览
zshun8023
注册会员   /  发表于:2024-3-12 15:58:43
沙发
你好,这个功能在7.0中没有了吗?
image.png364633178.png
回复 使用道具 举报
zshun8023
注册会员   /  发表于:2024-3-12 16:00:20
板凳
zshun8023 发表于 2024-3-12 15:58
你好,这个功能在7.0中没有了吗?

哦,需要用大括号括起来
回复 使用道具 举报
Eden.SunWyn认证
超级版主   /  发表于:2024-3-12 17:18:36
地板
zshun8023 发表于 2024-3-12 16:00
哦,需要用大括号括起来

是的,后面产品更新迭代,表达式通过括号进行定义和计算:
{IIF(RowNumber(Nothing) Mod 2, Theme.Colors(1, 4), "Transparent")}



image.png153055724.png


回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部